内容主要来自:http://dev.w3.org/csswg/css3-animations
css3.0草案中使用keyframe来完成一些简单的动画。
例如Safari中如下效果:
代码如下:
1 <style type="text/css">
2 div{
3 width:110px;
4 height:110px;
5 border:1px solid;
6 }
7 #eye{
8 border:1px #FF0000 solid;
9 width:10px;
10 height:10px;
11 background:#ff0000;
12 color: #000000;">: circle; /*使用动画circle*/
13 color: #000000;">: 1s; /*1次动画的时间为1s,keyframes中的100%即1s*/
14 color: #000000;">: 2; /*循环播放的次数*/
15 }
16 /*定义的关键帧动画,名称为circle*/
17 @ color: #000000;">{
18 0%{
19 /*w3c网站示例中使用top、left属性,但实际在safari中无效*/
20 margin:0px;
21 }
22 25%{
23 margin:100px 100px 0px 0px;
24 }
25 50%{
26 margin:100px 0px 0px 100px;
27 }
28 75%{
29 margin:0px 0px 100px 100px;
30 }
31 100%{
32 margin:0px;
33 }
34 }
35 </style>
36 <div>
37 <div id="eye">
38 </div>
39 </div>
2 div{
3 width:110px;
4 height:110px;
5 border:1px solid;
6 }
7 #eye{
8 border:1px #FF0000 solid;
9 width:10px;
10 height:10px;
11 background:#ff0000;
12 color: #000000;">: circle; /*使用动画circle*/
13 color: #000000;">: 1s; /*1次动画的时间为1s,keyframes中的100%即1s*/
14 color: #000000;">: 2; /*循环播放的次数*/
15 }
16 /*定义的关键帧动画,名称为circle*/
17 @ color: #000000;">{
18 0%{
19 /*w3c网站示例中使用top、left属性,但实际在safari中无效*/
20 margin:0px;
21 }
22 25%{
23 margin:100px 100px 0px 0px;
24 }
25 50%{
26 margin:100px 0px 0px 100px;
27 }
28 75%{
29 margin:0px 0px 100px 100px;
30 }
31 100%{
32 margin:0px;
33 }
34 }
35 </style>
36 <div>
37 <div id="eye">
38 </div>
39 </div>
firefox不支持keyframes。