css3@keyframes规则浅析

今日休战，不好意思。。

语法：

@keyframes '{' '}';

：[ [ from | to | ]{ sRules } ] [ [ , from | to | ]{ sRules } ]*

取值：

identifier定义一个动画名称

定义动画在每个阶段的样式，即帧动画。

说明：

指定动画名称和动画效果。

@keyframes定义的动画名称用来被animation-name所使用。

定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

示例代码：

@keyframes testanimations{

from{opacity:1;}

to{opacity:0;}

}

其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式：

示例代码：

@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);}

}