@keyframes
- 版本：CSS3
- 2015.9.6
语法：
@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(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); } } -
当然，也可以不使用关键字from和to，而都使用<percentage>：
示例代码：
@keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); } } 注意，这里的0%不能简写成0，0是非标准语法（虽然被某些浏览器所支持）。
兼容性：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 6.0-9.0 | 2.0-4.0 | 4.0-43.0 -webkit- |
3.1-3.2 | 15.0-29.0 -webkit- |
3.2-8.1 -webkit- |
2.1-3.0 -webkit- |
18.0-40.0 -webkit- |
| 10.0+ | 5.0-15.0 -moz- |
4.0-8.1 -webkit- |
4.0+ -webkit- |
||||
| 16.0 |