CSS3 @keyframes 语法

说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

语法：

@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。