@keyframes

  • 版本:CSS3

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

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
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

@keyframes示例: