transition

简单的动画可以用 transition 属性来指定过渡的属性，复杂的就可以用到 animation 了。

animation

animation 共有 8 个属性：

• animation-name：指定 @keyframes 动画的名称。

• animation-duration：指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。

• animation-timing-function：指定动画计时函数，即动画的速度曲线，默认是 ease。linear、ease、ease-in、ease-out、ease-in-out。这些值其实都是 cubic-bezier(n,n,n,n) 的特例。它们被称为贝塞尔曲线。一般使用 linear 即匀速动画。

• animation-delay：指定动画延迟时间，即动画要不要延时开始，默认是 0。也可以是负数，负数的话相当于提前从什么时候运动，如果设置了一个 div 在 2s 时间内宽度从 0px 增加到 100px，又设置了延迟时间为 -1s，且匀速运动，则动画将从宽度 50px 匀速增加到100px,且过渡时间为 1s;-1s 表示提前一秒。

• animation-iteration-count：指定动画播放的次数，默认是 1，无限播放时使用 infinite。

• animation-play-state：指定动画播放状态，正在运行或暂停。默认值 running 表示播放， paused 表示暂停。

• animation-direction：指定动画播放的方向。默认是 normal。

• normal 默认值。

• reverse 表示动画反向播放。

• alternate 表示正向和反向交叉进行。

• alternate-reverse 表示反向和正向交叉进行。

• animation-fill-mode：指定动画填充模式。默认是 none。

• forwards，表示，动画完成后，元素状态保持为最后一帧的状态。

• backwards，表示，有动画延迟时，动画开始前，元素状态保持为第一帧的状态。

• both，表示上述二者效果都有。