CSS3动画属性animation

CSS3动画属性animation

一、animation基本用法

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

二、animation属性参数说明

1、name (animation-name)

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

@keyframes name{...}{
    0%{
        opacity: 0;
    }
    100%{...}{
        opacity: 1;
    }
 }

		

备注：以上代码定义了一个动画，名叫name，效果是使透明度从0变化到1,0%~100%为整个过程，当然也可以定义多段如：0%~20~50%~100%。

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设置逐帧显示，第一帧为样式的初始值。

(8)、steps(<number>[, [ start | end ] ]?)：把keyframes里设置的一帧等分为几帧，start为第一次显示第一帧，end第一次显示样式的初始值，例如：steps(4,start)

(9)、cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果

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：设置对象状态为动画结束或开始的状态，结束时状态优先