animation 循环_animation

Animation指定一个周期持续时间内的动画。当然需要该属性支持动画。

使用时需要指定周期时间和关键帧名称

上述代码鼠标放在div上会执行名为move的动画，持续时间为4秒。@keyframes move定义关键帧，按上述比例将时间分为5个关键帧节点，没到达一个关键帧执行当前关键帧语句。

Animation 共有8个属性分别如下。

animation-name'>：检索或设置对象所应用的动画名称

animation-duration'>：检索或设置对象动画的持续时间，同transition

animation-timing-function'>：检索或设置对象动画的过渡类型，同transition

animation-delay'>：检索或设置对象动画延迟的时间，同transition

animation-iteration-count'>：检索或设置对象动画的循环次数

animation-direction'>：检索或设置对象动画在循环中是否反向运动

animation-fill-mode'>：检索或设置对象动画时间之外的状态

animation-play-state'>：检索或设置对象动画的状态。

1.1animation-iteration-count

上述语法指定动画执行三次，也可以输入infinite 表示无限循环

1.2animation-fill-mode

none:默认值。不设置对象动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束或开始的状态

Mode设置物体变化完物体的状态，forward很好理解，就是物体运动完最后什么状态就是什么状态。Backwards就是物体运动前，变成第一帧的状态，由于运动前时间短这个不太好观察，如果想要观察到这个状态可以使用delay演示，这样就可以观察到。Both在物体运动前变成第一帧状态，结束后变成最后一帧状态。

1.3animation-direction

Direction指定动画运行方向有如下几个值

Normal：正常方向(默认)

Reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

1.4animation-play-state

running：运动

paused：暂停

控制运动状态，用法局限不赘述

注意：和transition一样，第一个时间格式为duration，如果有第二个时间格式则为delay