animation属性

本文是为了方便快速查阅css的animation属性和值，以及一些属性值详细说明，需要的可以收藏哦。

属性	描述	值
animation-name	指定 @keyframes 动画的名称	自定义
animation-duration	指定动画完成一个周期所需要的时间，单位秒（s）或毫秒（ms），默认是0	自定义
animation-timing-function	指定动画计时函数，即动画的速度曲线，默认是“ease”	linear、ease、ease-in、ease-out、ease-in-out
animation-delay	指定动画延迟时间，即动画何时开始，默认是0	自定义
animation-iteration-count	指定动画播放次数，默认是1	自定义，无限播放时使用 infinite
animation-direction	指定动画播放的方向，默认是normal	reverse、alternate、alternate-reverse
animation-fill-mode	指定动画填充模式，默认是none	forward、backwards、both
animation-play-state	指定动画播放状态，正在运行或暂停，默认是running	running、paused

详细说明：

animation-delay

延迟可以为负数。负延迟表示动画仿佛开始前就一间运行过了那么长时间

animation-direction

• normal 默认值。
• reverse 表示动画反向播放。
• alternate 表示正向和反向交叉进行。
• alternate-reverse 表示反向和正向交叉进行

animation-fill-mode：

• none默认值。
• forwards，表示，动画完成后，元素状态保持为最后一帧的状态。
• backwards，表示，有动画延迟时，动画开始前，元素状态保持为第一帧的状态。
• both，表示上述二者效果都有

animation-play-state

• running-播放
• paused-暂停

//鼠标hover暂停效果
div:hover {
    animation-play-state: paused;
}