@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(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 Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12+ 2-4 4-42 -webkit- 3.1-3.2 9-11.6 3.2-5.1 -webkit- #1 2.1-3 -webkit- #1 7-10 -webkit- 10-12 61 56 10+ 11.4 -webkit- 4+ 1.2 -webkit- 7.12
10+ 5-15 -moz- 43+ 4-5 -webkit- #2 12 -o- 6.0-8.4 -webkit- 4-4.4.4 -webkit- 12.1+
16+ 5.1-8 -webkit- 12.1 9.0+
9+ 15-29 -webkit-
30+
  1. 通过selectivizr，可以免去css3前缀。本页下方的示例已使用此方案。

示例：