animation的属性值

今天主要是介绍一下CSS中animation的几个属性值。首先animation是页面制作动画效果的时候添加的，但是它有几个属性值还是要区分清楚的。
1、animation-name：主要是在设置动画的名字（自定义的）的时候使用通常要与@keyframes name{0%{ }100%{ }}一起使用。如下图：

2、animation-duration：用来设置动画执行一次的时间，这个属性值必须存在因为它的默认值是0没有动画效果。
3、animation-delay:动画的延迟时间，单位一般是s(秒)、ms(毫秒)默认延迟时间也是0。
4、animation-iteration-count：动画的重复次数，默认值就是1，infinite无限次数。
5、animation-timing-function:动画的运动形式，animation-timing-function的值是贝塞尔曲线，默认值是ease,表示动画以低速开始，然后加速，最后在结束前变慢。 最常用的值有以下几个：
（1）linear:表示动画从头到尾的速度都是相同的。
（2）ease-in:表示动画以低速开始。
（3）ease-out:表示动画以低速结束。
（4）ease-in-out:表示动画以低速开始和结束
6、animation-fill-mode:规定动画播放之前或之后。其动画效果是否可见。（1）None（默认值）：在运动结束之后回到初始 位置，在延迟的情况下，让0%在延迟后生效。
（2）Backwards:在延迟的情况下，让0%在延迟前生效。
（3）Forwards:在运动结束之后，停留到结束位置。
（4）both:backwards和forwards同时生效。
（5）animation-direction:属性定义是否应该轮流反向播放动画。
（6）alternate:一次正向(0%_{100%），一次反向（100%}0%）。
（7）reverse:永远都是反向。从100%~0%。
（8）normal（默认值）：永远都是正向，从0%~100%。