多拉A梦的CSS(5) - keyframes

内容主要来自：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>

 

 

 

 

 

firefox不支持keyframes。