CSS3 animation

今天介绍下CSS3 animation 。

语法

animation: <single-animation-name> || <duration-time> || <timing-function> || <delay-time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<single-animation-name>:
动画名称：通过@keyframes关键词定义

<duration-time>:
动画时间

<timing-function>:
动画函数：取值ease（逐渐变慢，默认值）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（加速然后减速）、cubic-bezier（自定义特定的时间曲线）、steps(number_of_steps, direction)分步过渡、step-start相当于steps(1, start)、step-end相当于steps(1, end)。

<delay-time>:
动画延迟时间

<single-animation-iteration-count>:
动画播放次数：取值infinite（无限次），n（n次）

<single-animation-direction>
动画播放方向：取值normal（正向播放）、alternate（正反反正）、reverse（反向播放）、alternate-reverse（反正正反）

<single-animation-fill-mode>
动画结束是停止是的状态：none(动画执行前后不改变任何样式)、forward（最后一帧状态）、backward(第一帧状态）、both(根据animation-direction轮流应用forwards和backwards)

<single-animation-play-state>
动画播放状态：取值： running（播放状态）、paused（暂停状态）

@keyframes定义动画名称

语法

@keyframes <identifier> {
	[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* 
}

<identifier>
动画名称

<from>
0% 开始状态

<to>
100% 结束状态

<percentage>
百分比状态

Demo

注意 IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome必须使用webkit前缀。