CSS动画

过渡最适合构建那些状态有变化的动画，而要做更加复杂的动画，最好的选择是使用 animation 属性。

关键帧

为了设定动画过程，需要使用@keyframes 指定关键帧，@keyframes 的规则包含动画名称、动画断点以及产生变化的属性。例如：

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

上例中，动画名称为 slide，有三个关键帧断点，使用定位关键词产生位置上的变化。还可以使用关键词 from to 表示0% 和 100%。

动画名称

使用 keyframes 指定关键帧时，需要命名动画名称 (animation-name)，该名称将在元素声明动画（animation）属性时使用。例如：

.stage:hover .ball {
        animation-name: slide;
    }

动画持续时间、缓动效果及延迟

和过渡属性类似，动画属性也有持续时间（animation-duration）、缓动效果（animation-timing-function）及延迟属性（animation-delay）。例如：

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
}

动画重复次数

默认情况下，动画只执行一次，我们可以通过 animation-iteration-count 属性指定重复次数，其值可以是整数，还可以是 infinite 关键字，使用 infinite 关键字后，动画效果将无限循环。

动画方向

动画运行的方向，可以通过 animation-direction 属性来指定，其值有 normal, reverse, alternate 和 alternate-reverse。

1. normal 0->100；
2. reverse 100->0；
3. alternate 0->100->0；
4. alternate-reverse 100->0->100；

其中，后两个值，需要和动画重复次数配合使用。

动画运行状态

通过 animation-play-state 可以在动画运行过程中暂停，默认值为 running，即不暂停，若其值为 paused，则点击动画元素，可暂停其动画。

动画填充模式

动画填充模式（animation-fill-mode）指定元素在动画执行之前、之后或者前后的状态，其值为 none, forwards, backwards 和 both。

动画属性简写

和过渡属性类似，动画属性也可以简写，顺序为 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, 最后为 animation-play-state。例如：

.stage:hover .ball {
    animation: slide 2s linear;
}

动画库 animate.css 的使用

在实际工作中，动画效果的调试是个非常繁琐的工作，因此，涌现出一批 CSS 的动画库，其中 animate.css 由于动画效果丰富，因此使用较多。

animate.css 的用法非常简单，引入样式表后，在需要动画效果的元素起始标签中添加 animated 和相应动画效果的标签即可。例如：

<div>
    <h1 class="animated fadeInRight">中国制造进入专利维权“反攻期”？</h1>
    <p class="animated bounceInLeft">当中国企业屡屡在“海外专利战”中被“穷追猛打”时，华为却意外打出了“专利反围剿”的关键一枪。</p>
</div>

其中 fadeInRight、bounceInLeft 为 animate.css 提供的动画效果。