@keyframes

  • 版本:CSS3
  • 2015.9.6
html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲

语法:

@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

示例: