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 }