@keyframes <identifier> '{' <keyframes-blocks> '}';
<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*
示例代码:
@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);} }
示例代码:
@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。
IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|
6.0-9.0 | 4.0 | 4.0-8.0 -webkit- | 4.0-39.0 -webkit- | 15.0-24.0 -webkit- |
10.0 | 5.0-15.0 -moz- | |||
16.0 |