css的animation

animation：

这个也是一个重要的属性，但是不经常用，容易遗忘，记录一下：

简写：

animtion:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction

1.animation-name:规定需要绑定到选择器的 keyframe 名称

2.animation-duration:规定完成动画所花费的时间，以秒或毫秒计,请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了

3.animation-timing-function:规定动画的速度曲线
linear;匀速
ease;默认。动画以低速开始，然后加快，在结束前变慢
ease-in;动画以低速开始
ease-out;动画以低速结束
ease-in-out;动画以低速开始和结束
cubic-bezier(n,n,n,n);在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

4.animation-delay:规定在动画开始之前的延迟
以秒或毫秒计。默认值是 0;允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画

5.animation-iteration-count:规定动画应该播放的次数; n(播放的次数Int)/infinite(循环播放)

6.animation-direction:规定是否应该轮流反向播放动画;normal(正常播放)/alternate(轮流反向播放)/reverse(反向运行动画，每周期结束动画由尾到头运行)/alternate-reverse(反向交替,反向开始交替)

animation-fill-mode:属性规定动画在播放之前或之后，其动画效果是否可见;
/none(默认值；动画开始之前，不会赋予任何样式)
/forwards(目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值)
/backwards(动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值)
/both(动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性)

animation-play-state 属性规定动画正在运行还是暂停;paused(暂停)/running(播放)