@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。
兼容性：
- = 支持
- = 不支持
- = 部分支持
- = 实验性质
| 支持版本\类型 | |||||
|---|---|---|---|---|---|
| 版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60 |
| 版本 | 10.0 | 5.0-9.0 |
写法：
| 内核类型 | 写法 |
|---|---|
| Webkit(Chrome/Safari) | @-webkit-keyframes |
| Gecko(Firefox) | @-moz-keyframes |
| Presto(Opera) | |
| Trident(IE) | @-ms-keyframes |
| W3C | @keyframes |