【心得总结】超炫CSS3动画制作网站 ----常用动画效果总结
http://eqxiu.com
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.clearfix{zoom:1;}
.clearfix:after{content:'\20';display:block;height:0;clear:both;}
body{background:#A0D468;}
.wrapper p{font-size:20px;color:#fff;}
.box{
width:150px;
height:150px;
margin:50px auto 0;
border-radius:50%;
background:#fff;
text-align:center;
}
.box img{
width:140px;
height:140px;
border-radius:50%;
margin-top:5px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>淡入</p>
<style>
.dashin img{animation:dashin 2s ease .4s;}
@keyframes dashin{
from{
opacity:0;
}
to{
opacity:1;
}
}
</style>
<div class="dashin box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>淡出</p>
<style>
.dashout img{animation:dashout 2s ease .4s;}
@keyframes dashout{
from{
opacity:1;
}
to{
opacity:0;
}
}
</style>
<div class="dashout box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>左移入</p>
<style>
.moveinLeft img{animation:moveinLeft 2s ease .4s;}
@keyframes moveinLeft{
0%{
opacity:0;
transform:translate3d(-100%,0,0);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="moveinLeft box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>右移入<p>
<style>
.moveinRinght img{animation:moveinRinght 2s ease .4s;}
@keyframes moveinRinght{
0%{
opacity:0;
transform:translate3d(100%,0,0);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="moveinRinght box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>上移入<p>
<style>
.moveinUp img{animation:moveinUp 2s ease .4s;}
@keyframes moveinUp{
0%{
opacity:0;
transform:translate3d(0,-100%,0);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="moveinUp box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>下移入</p>
<style>
.moveinDown img{animation:moveinDown 2s ease .4s;}
@keyframes moveinDown{
0%{
opacity:0;
transform:translate3d(0,100%,0);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="moveinDown box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>左弹入</p>
<style>
.bounceLeft img{animation:bounceLeft 2s ease .4s;}
@keyframes bounceLeft{
0%{
opacity:0;
transform:translate3d(-3000px,0,0);
}
60%{opacity:1;
transform:translate3d(25px,0,0);
}
75%{transform:translate3d(-10px,0,0);}
90%{transform:translate3d(5px,0,0);}
100%{opacity:1;transform:none;}
}
</style>
<div class="bounceLeft box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>右弹入</p>
<style>
.bounceRight img{animation:bounceRight 2s ease .4s;}
@keyframes bounceRight{
0%{
opacity:0;
transform:translate3d(3000px,0,0);
}
60%{opacity:1;
transform:translate3d(-25px,0,0);
}
75%{transform:translate3d(10px,0,0);}
90%{transform:translate3d(-5px,0,0);}
100%{opacity:1;transform:none;}
}
</style>
<div class="bounceRight box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>上弹入</p>
<style>
.bounceUp img{animation:bounceUp 2s ease .4s;}
@keyframes bounceUp{
0%{
opacity:0;
transform:translate3d(0,-100%,0);
}
60%{
opacity:1;
transform:translate3d(0,25px,0);
}
75%{transform:translate3d(0,-10px,0);}
90%{transform:translate3d(0,5px,0);}
100%{transform:none;}
}
</style>
<div class="bounceUp box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>下弹入</p>
<style>
.bounceDown img{animation:bounceDown 2s ease .4s;}
@keyframes bounceDown{
0%{
opacity:0;
transform:translate3d(0,100%,0);
}
60%{
opacity:1;
transform:translate3d(0,-25px,0);
}
75%{transform:translate3d(0,10px,0);}
90%{transform:translate3d(0,-5px,0);}
100%{transform:none;}
}
</style>
<div class="bounceDown box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>中心弹入</p>
<style>
.bouncein img{animation:bouncein 2s ease .4s;}
@keyframes bouncein{
0%{
opacity:0;
transform:scale3d(.3,.3,.3);
}
20%{
opacity:1;
transform:scale3d(1.1,1.1,1.1);
}
40%{transform:scale3d(.9,.9,.9);}
60%{transform:scale3d(1.03,1.03,1.03);}
80%{transform:scale3d(.97,.97,.97);}
100%{transform:scale3d(1,1,1);}
}
</style>
<div class="bouncein box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>中心放大</p>
<style>
.zoomIn img{animation:zoomIn 2s ease .4s;}
@keyframes zoomIn{
0%{
opacity:0;
transform:scale3d(.3,.3,.3);
}
100%{
opacity:1;
transform:scale3d(1,1,1);
}
}
</style>
<div class="zoomIn box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>光速进入</p>
<style>
.lightspeedin p{animation:lightspeedin 2s ease .4s;opacity:0;}
@keyframes lightspeedin{
0%{
opacity:0;
transform:translate3d(-500%,0,0) skewX(30deg);;
}
60%{
transform:skewX(-20deg);opacity:1;
}
80%{transform:skewX(5deg);opacity:1;}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="lightspeedin">
<p>
测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入测试光速飞入</p>
</div>
<p>翻滚进入----未研究出来</p>
<style>
.rollIn p{animation:lightspeedin 2s ease .4s;}
@keyframes rollIn{
0%{
opacity:0;
transform:translate3d(-200%,0,0) rotate3d(0,0,1,-120deg);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="rollIn">
<p style="height:2px;background:#fff;margin-bottom:50px;"></p>
</div>
<p>摇摆</p>
<style>
.wobble img{animation:wobble 2s ease .4s;}
@keyframes wobble{
0%{transform:none;}
20%,60%{
opacity:1;
transform:translate3d(-15%,0,0) rotate3d(0,0,1,-5deg);
}
40%,80%{
opacity:1;
transform:translate3d(15%,0,0) rotate3d(0,0,1,5deg);
}
100%{
opacity:1;
transform:none;
}
}
</style>
<div class="wobble box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
<p>抖动</p>
<style>
.rubberBand img{animation:rubberBand 2s ease .4s;}
@keyframes rubberBand{
0%{transform:scale3d(1,1,1);opacity:0;}
30%{transform:scale3d(1.25,.75,1);}
40%{transform:scale3d(.75,1.25,1);}
50%{transform:scale3d(1.15,.85,1);}
65%{transform:scale3d(.95,1.05,1);}
75%{transform:scale3d(1.05,.95,1);}
100%{transform:scale3d(1,1,1);}
}
</style>
<div class="rubberBand box">
<img src="http://res.eqxiu.com/group1/M00/9B/4B/yq0KA1TAm6yAPo3gAACRluaSsRU556.jpg">
</div>
</div>
</body>
</html>
