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内做了一件事情。