CSS3中animation属性的使用



一、animation基本用法

animation: name duration timing-function delay iteration-count direction fill-mode;

 

二、animation属性参数说明

 

1、name (animation-name)

动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如：

2、duration (animation-duration)

整个动画的持续时间，必须带上时间单位，s或者ms均可；

 

3、timing-function (animation-timing-function)

定义动画的速度曲线，值有如下几种

(1)、ease：动画以低速开始，然后加快，在结束前变慢。

(2)、linear：匀速

(3)、ease-in：动画以低速开始

(4)、ease-out：动画以低速结束

(5)、ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀

(6)、step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。

(7)、step-end：按keyframes设置逐帧显示，第一帧为样式的初始值。

 

4、delay (animation-delay)

动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位

 

5、iteration-count (animation-iteration-count)

动画循环执行的次数，无单位，infinite为无限循环。

 

6、direction (animation-direction)

指动画时间轴上帧前进的方向。

(1)、normal:默认值，表示一直向前，最后一帧结束后回到第一帧

(2)、reverse:与normal的运行方向相反

(3)、alternate:往前播放完了之后，然后再倒带，倒带到头了再往后播放

(4)、alternate-reverse:与alternate的运行方向相反

 

7、fill-mode (animation-fill-mode)

设置动画结束后的状态

(1)、none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态

(2)、forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧

(3)、backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）

(4)、both：设置对象状态为动画结束或开始的状态，结束时状态优先

文章转载自： CSS3中animation属性的使用   http://www.studyofnet.com/news/1141.html