@keyframes

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

• 浅绿 = 支持
• 红色 = 不支持
• 墨绿 = 部分支持
• 橙色 = 实验性质