CSS3 动画

如果制作过动画就可以知道，动画的本质是一帧一帧图片，CSS动画的原理也是这样，只不过不是将所有帧全部制作出来，而是有关键帧，在加上一系列属性控制，就可以作出动画来了。

CSS动画的属性名称叫做 animation，有8个子属性，还需要搭配 @keyframe name 来设置关键帧，就可以作出动画了。

先看一个简单的例子：

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    line-height: 100px;
    font-size: 20px;
    color: whitesmoke;
    text-align: center;
    animation: 3s rain infinite;
}

@keyframes rain {
    0% {
        background-color: #000;
    }

    25% {
        background-color: hsl(30, 100%, 50%);
        font-size: 40px;
    }

    75% {
        background-color: hsl(30, 100%, 50%);
        font-size: 60px;
    }

    100% {
        background: #000;
        font-size: 80px;
    }
}

在DIV中，定义了animation属性，其后跟了3s表示动画时间，rain表示动画名称，与下边的 @keyframe 之后的动画名称对应。后边的infinite表示循环播放动画。

@keyframe 之后跟着动画名，然后用 0-100% 或者from-percentage-to 标明各个关键帧的样式，浏览器会自动计算从一个变到下一个的过程。这里要注意的是0%一定不能省略后边的百分号。

知道了 animation 和 @keyframes 的对应关系之后，就可以来看看animation的8个属性用于控制动画：

animation子属性

属性名	解释
animation-name	表示动画名，与@keyframe中对应，如果设置为none则无动画
animation-duration	动画播放时间，数值加上s为秒，ms为毫秒，不能不加时间单位
animation-timing-function	和transition 的事件函数一样，也有ease linear 等几种
animation-delay	设置延迟时间，为负数就从0时间开始播放，截掉之前部分
animation-iteration-count	定义动画的播放次数，可以是整数或者浮点数，设置为infinite表示无限循环
animation-direction	这个是指动画播放的方向，normal只动画按照次序播放，如果设置为alternate，则偶数次向前播放，奇数次反方向播放。reverse是倒转播放，alternate-reverse是一反一正播放。可以用来制作一些往复的效果。
animation-play-state	主要有两个值，running和paused，running就是让暂停的动画继续播放，paused是暂停当前动画播放，一般可以写在hover里，用户移动到上边的时候就暂停播放。
animation-fill-mode	定义动画开始之前和结束之后发生的操作，主要有四个值，none表示默认无其他行为，forwards表示结束后继续停在关键帧的位置，bakcwards表示应用初始帧。both表示同时使用，前后属性。

另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡，将step写在animation属性的最后一个值。阮一峰的博客里提到了一个利用step的例子。

由于动画的属性比较多，尤其想做复杂的动画，因此animation的属性一般不用连写，都是单独写在一行里，比较明确。