CSS3的@keyframes用法详解:
@keyframes与animation属性是密切相关的
一.基本知识:
keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果,但有点儿粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以与@keyframes结合使用将指定时间段内的动画划分的更为具体一些。
语法结构:
1 @keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
1、animationname:声明动画的名称。
2、keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
这里建议始终使用百分比形式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>蚂蚁部落</title> 7 <style type="text/css"> 8 div{ 9 width:100px; 10 height:100px; 11 background:red; 12 position:relative; 13 14 animation:theanimation 5s infinite alternate; 15 -webkit-animation:theanimation 5s infinite alternate ; 16 -moz-animation:theanimation 5s infinite alternate ; 17 -o-animation:theanimation 5s infinite alternate ; 18 -ms-animation:theanimation 5s infinite alternate ; 19 } 20 @keyframes theanimation{ 21 from {left:0px;} 22 to {left:200px;} 23 } 24 @-webkit-keyframes theanimation{ 25 from {left:0px;} 26 to {left:200px;} 27 } 28 @-moz-keyframes theanimation{ 29 from {left:0px;} 30 to {left:200px;} 31 } 32 @-o-keyframes theanimation{ 33 from {left:0px;} 34 to {left:200px;} 35 } 36 @-ms-keyframes theanimation{ 37 from {left:0px;} 38 to {left:200px;} 39 } 40 </style> 41 </head> 42 <body> 43 <div></div> 44 </body> 45 </html>
上面代码实现了简单的动画,下面简单做一下分析:
1.使用@keyframes定义了一个名为theanimation的动画。
2.@keyframes声明的动画名称要和animation配合使用。
3.from to等价于0%-100%,所以就是规定5s内做了一件事情。