@-webkit-keyframes 动画 css3

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

例子：

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

 1 div
 2 {
 3   animation: myfirst 5s;          /*IE*/
 4   -moz-animation: myfirst 5s;    /* Firefox */
 5   -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
 6   -o-animation: myfirst 5s;    /* Opera */
 7 }
 8 
 9 
10 @keyframes myfirst     /*IE*/
11 {
12   0%   {background: red;}
13   25%  {background: yellow;}
14   50%  {background: blue;}
15   100% {background: green;}
16 }
17 
18 @-moz-keyframes myfirst /* Firefox */
19 {
20   0%   {background: red;}
21   25%  {background: yellow;}
22   50%  {background: blue;}
23   100% {background: green;}
24 }
25 
26 @-webkit-keyframes myfirst /* Safari 和 Chrome */
27 {
28   0%   {background: red;}
29   25%  {background: yellow;}
30   50%  {background: blue;}
31   100% {background: green;}
32 }
33 
34 @-o-keyframes myfirst /* Opera */
35 {
36   0%   {background: red;}
37   25%  {background: yellow;}
38   50%  {background: blue;}
39   100% {background: green;}
40 }
41 
42 //改变背景色和位置：
43 @keyframes myfirst
44 {
45   0%   {background: red; left:0px; top:0px;}
46   25%  {background: yellow; left:200px; top:0px;}
47   50%  {background: blue; left:200px; top:200px;}
48   75%  {background: green; left:0px; top:200px;}
49   100% {background: red; left:0px; top:0px;}
50 }
51 
52 @-moz-keyframes myfirst /* Firefox */
53 {
54   0%   {background: red; left:0px; top:0px;}
55   25%  {background: yellow; left:200px; top:0px;}
56   50%  {background: blue; left:200px; top:200px;}
57   75%  {background: green; left:0px; top:200px;}
58   100% {background: red; left:0px; top:0px;}
59 }
60 
61 @-webkit-keyframes myfirst /* Safari 和 Chrome */
62 {
63   0%   {background: red; left:0px; top:0px;}
64   25%  {background: yellow; left:200px; top:0px;}
65   50%  {background: blue; left:200px; top:200px;}
66   75%  {background: green; left:0px; top:200px;}
67   100% {background: red; left:0px; top:0px;}
68 }
69 
70 @-o-keyframes myfirst /* Opera */
71 {
72   0%   {background: red; left:0px; top:0px;}
73   25%  {background: yellow; left:200px; top:0px;}
74   50%  {background: blue; left:200px; top:200px;}
75   75%  {background: green; left:0px; top:200px;}
76   100% {background: red; left:0px; top:0px;}
77 }

下面的表格列出了 @keyframes 规则和所有动画属性：

运行名为 myfirst 的动画，其中设置了所有动画属性：

 1 div {
 2     animation-name: myfirst;
 3     animation-duration: 5s;
 4     animation-timing-function: linear;
 5     animation-delay: 2s;
 6     animation-iteration-count: infinite;
 7     animation-direction: alternate;
 8     animation-play-state: running;
 9     /* Firefox: */
10     -moz-animation-name: myfirst;
11     -moz-animation-duration: 5s;
12     -moz-animation-timing-function: linear;
13     -moz-animation-delay: 2s;
14     -moz-animation-iteration-count: infinite;
15     -moz-animation-direction: alternate;
16     -moz-animation-play-state: running;
17     /* Safari 和 Chrome: */
18     -webkit-animation-name: myfirst;
19     -webkit-animation-duration: 5s;
20     -webkit-animation-timing-function: linear;
21     -webkit-animation-delay: 2s;
22     -webkit-animation-iteration-count: infinite;
23     -webkit-animation-direction: alternate;
24     -webkit-animation-play-state: running;
25     /* Opera: */
26     -o-animation-name: myfirst;
27     -o-animation-duration: 5s;
28     -o-animation-timing-function: linear;
29     -o-animation-delay: 2s;
30     -o-animation-iteration-count: infinite;
31     -o-animation-direction: alternate;
32     -o-animation-play-state: running;
33 }