[CSS参考手册](http://css.doyoe.com/)»[语法与规则列表](#)» 相关内容： [**其它语法与规则参考**选择其它项](#) - [!important](#) - [comment](#) - [@import](#) - [@charset](#) - [@media](#) - [@font-face](#) - [@page](#) - [@keyframes](#) # @keyframes - **版本：CSS3** ### 语法： **@keyframes**[<identifier>](#) '{' [<keyframes-blocks>](#) '}'; **<keyframes-blocks>**：[ [ from | to | [<percentage>](#) ]{ sRules } ] [ [ , from | to | [<percentage>](#) ]{ sRules } ]* ### 取值： [<identifier>](#)：identifier定义一个动画名称<keyframes-blocks>：定义动画在每个阶段的样式，即帧动画。 ### 说明： **指定动画名称和动画效果。** - [@keyframes](#)定义的动画名称用来被[animation-name](#)所使用。 - **定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：** **示例代码：** ~~~ @keyframes testanimations{ from{opacity:1;} to{opacity:0;} } ~~~ 其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。 - **如果复杂的动画，可以混合[<percentage>](#)去设置某个时间段内的任意时间点的样式：** **示例代码：** ~~~ @keyframes testanimations{ from{transform:translate(0,0);} 20%{transform:translate(20,20);} 40%{transform:translate(40,0);} 60%{transform:translate(60,20);} 80%{transform:translate(80,0);} to{transform:translate(100,20);} } ~~~ - **当然，也可以不适用关键字from和to，而都使用[<percentage>](#)：** **示例代码：** ~~~ @keyframes testanimations{ 0%{transform:translate(0,0);} 20%{transform:translate(20,20);} 40%{transform:translate(40,0);} 60%{transform:translate(60,20);} 80%{transform:translate(80,0);} 100%{transform:translate(100,20);} } ~~~ 注意，这里的0%不能简写成0。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="unsupport">6.0-9.0</td> <td class="unsupport">4.0</td> <td rowspan="2" class="experimentsupport">5.1</td> <td rowspan="2" class="experimentsupport">13.0-16.0</td> <td rowspan="2" class="unsupport">11.50-11.60</td> </tr><tr><th>版本</th> <td class="experimentsupport">10.0</td> <td class="experimentsupport">5.0-9.0</td> </tr></tbody></table> ### 写法： | 内核类型 | 写法 | |-----|-----| | Webkit(Chrome/Safari) | @-webkit-keyframes | | Gecko(Firefox) | @-moz-keyframes | | Presto(Opera) | | | Trident(IE) | @-ms-keyframes | | W3C | @keyframes | ### 示例： 弹球滑杆 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved