CSS3 animation利器完爆flash
记得long long ago要在网页中实现动画,基本都是flash,这flash老大的位置一直到CSS3出现以后开始动摇了,CSS3 animation函数可以说是flash的致命打击,此函数支持主流浏览器,包括支持CSS3的IE浏览器。
animation 参数:
Property | Description | CSS |
---|---|---|
@keyframes | Specifies the animation | 3 |
animation | A shorthand property for all the the animation properties, except the animation-play-state property | 3 |
animation-name | Specifies the name of the @keyframes animation | 3 |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 | 3 |
animation-timing-function | Describes how the animation will progress over one cycle of its duration. Default "ease" | 3 |
animation-delay | Specifies when the animation will start. Default 0 | 3 |
animation-iteration-count | Specifies the number of times an animation is played. Default 1 | 3 |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal" | 3 |
animation-play-state | Specifies whether the animation is running or paused. Default "running" | 3 |
详情大家可以进W3C看看:http://www.w3schools.com/css/css3_animations.asp
例子1:
HTML Code:
<div class="box"> <span class="a1">从左边渐渐飘入</span> <span class="a2">从中间淡入闪动两下,然后淡出</span> <span class="a3">从右边渐渐飘入</span> <hr /> <span class="a4">这个一直永久重复飘动</span> <hr /> <span class="a5">从小变大, 颜色从红变到绿</span> </div>
CSS Code:
.box { width:500px; height:300px; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; border:3px solid #eee; background:#e0e0e0; overflow:hidden; } span{ opacity:0; display:block; height:50px; font:bold 14px/50px "宋体"; } .a1{ transform:translate(55px); -webkit-animation:animations 2s ease-out; animation:animations 2s ease-out; } @-webkit-keyframes animations{ 0%{-webkit-transform:translate(0);opacity:0;} 50%{-webkit-transform:translate(30px);opacity:1;} 70%{-webkit-transform:translate(35px);opacity:1;} 100%{-webkit-transform:translate(60px);opacity:0;} } @keyframes animations{ 0%{transform:translate(0);opacity:0;} 50%{transform:translate(30px);opacity:1;} 70%{transform:translate(35px);opacity:1;} 100%{transform:translate(60px);opacity:0;} } .a2{ text-align:center;font-size:26px; -webkit-animation:animations2 5s ease-in-out 2s; animation:animations2 5s ease-in-out 2s; } @-webkit-keyframes animations2{ 0%{opacity:0;} 40%{opacity:.8;} 45%{opacity:.3;} 50%{opacity:.8;} 55%{opacity:.3;} 60%{opacity:.8;} 100%{opacity:0;} } @keyframes animations2{ 0%{opacity:0;} 40%{opacity:.8;} 45%{opacity:.3;} 50%{opacity:.8;} 55%{opacity:.3;} 60%{opacity:.8;} 100%{opacity:0;} } .a3{ transform:translate(360px); -webkit-animation:animations3 2s ease-out 2s; animation:animations3 2s ease-out 2s; } @-webkit-keyframes animations3{ 0%{-webkit-transform:translate(360px);opacity:0;} 50%{-webkit-transform:translate(330px);opacity:1;} 70%{-webkit-transform:translate(325px);opacity:1;} 100%{-webkit-transform:translate(300px);opacity:0;} } @keyframes animations3{ 0%{transform:translate(360px);opacity:0;} 50%{transform:translate(330px);opacity:1;} 70%{transform:translate(325px);opacity:1;} 100%{transform:translate(300px);opacity:0;} } .a4{ transform:translate(0); opacity:1; color: blue; /* infinite 永久重复 */ -webkit-animation:animations4 5s linear infinite; animation:animations4 5s linear infinite; } @-webkit-keyframes animations4{ 0%{-webkit-transform:translate(0px);} 100%{-webkit-transform:translate(500px);} } @keyframes animations4{ 0%{transform:translate(0px);} 100%{transform:translate(500px);} } .a5{ transform:translate(0); opacity:1; -webkit-animation:animations5 8s linear infinite; animation:animations5 8s linear infinite; } @keyframes animations5{ 0%{ transform:translate(0px); width:10%; height:10%; background:red; } 100%{ transform:translate(400px); width:50%; height:50%; background:blue; } } @-webkit-keyframes animations5{ 0%{ -webkit-transform:translate(0px); width:10%; height:10%; background:red; } 100%{ -webkit-transform:translate(400px); width:50%; height:50%; background:blue; } }
看看效果:http://www.qttc.net/static/demo/20140102/1.html
惊奇吧!一句js代码都不用写,动画效果都是靠css3去实现。以上样式其中有经常有一段@keyframes animations*,这个就是定义动画的地方。如果你玩过flash,那么这个应该最熟悉不过了,flash要实现动画其实就是定义关键帧,然后靠系统自动运算出每两个关键帧之间的动画,不过这运行只能是一个方向上的。
关键帧
比如,你想让一个球从左边移动到右边,可以这么定义关键帧:
基础CSS:
div { position:absolute; left:0; top:0; width:50px; height:50px; animation:moveCell 3s; }
关键帧可以这么定义:
@keyframes moveCell{ from{ left:0; } to{ left:500px; } }
就是有两个关键帧,from开始left=0到to结束left=500px,这就完成了一个非常简单的动画,
DEMO http://www.qttc.net/static/demo/20140102/2.html
如果,你想让这个div不按直线跑,可以多加一个关键,多个关键帧就需要百分比来描述具体位置了,如:
@keyframes moveCell{ 0% { left:0; top: 0; } 25% { left:0; top:300px; } 50% { left:500px; top:300px; } 100% { left:500px; top:0; } }
DEMO http://www.qttc.net/static/demo/20140102/3.html
animation:moveCell 3s
这里的3s值的是运行动画的时间,这个也类似于flash的时间轴,我们让它从0px到500px需要3秒跑完,就这么写,这个时间越小速度越快,时间越大速度越慢
我们也可以让它重复n次或者永久重复,在animation:moveCell 3s后面加上n次或者永久重复infinite,如让动画重复6次:
animation:moveCell 3s 6;
让动画永久重复:
animation:moveCell 3s infinite;
永久重复DEMO http://www.qttc.net/static/demo/20140102/4.html
我们不仅可以让它跑过去,还能让它原路返回,这很牛叉,alternate
属性:
animation:moveCell 3s infinite alternate;
DEMO http://www.qttc.net/static/demo/20140102/5.html
具体更多的大家看手册吧。
最后
上一个DEMO:http://www.qttc.net/static/demo/20140102/6.html
优点:动画的基本特征无非就是:移动,色变,形变,速度,而这几个特征在animation里都能轻松实现,关键帧也都能轻松实现,也能实现多个动画同时play已经各自的出场时间,配合SVG矢量结合这些动作就能搞定大部分动画,并且各大浏览器都能轻松实现。
缺点:复杂的动画需要写大量Code,虽然只是写CSS Code,还有一个致命的缺点就是动画play结束以后它会还原,比如有开场我让一个div从左跑到右,完了就让它停在哪,结果跑完以后它又还原到左边了。
看看这个例子:http://www.qttc.net/static/demo/20140102/2.html
文字链接:《CSS3 animation利器完爆flash》
文章地址:http://www.qttc.net/201401398.html
除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源
乳名?小名?昵称?网名?均可
email,放心,我不会给你乱投广告的
想获得回访就把你的站点URL写上(没有留空)
[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法