css3 动画

首先要说的是 animation-timing-function。这个东西经常被放在定义 animation 的类中，如：

.bar {
    width: 0;
    height: 256px;
    margin: 0 auto;
    background-color: red;
    position: relative;
    animation: bar 5s infinite steps(1, end);
}

根据 MDN:

Timing functions may be specified on individual keyframes in a @keyframes rule. If no animation-timing-function is specified on a keyframe, the corresponding value of animation-timing-function from the element to which the animation is applied is used for that keyframe. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

就是说这个东西本来应该是定义在单独的帧中的，表示这个帧开始到下一个帧开始这段时间的时间函数。如果帧中没定义这个 timing-function，那么就会用类中定义 animation 时候的函数，如上面就是 steps (1, end)。只能说，咱们中国人翻译外文时，都不仔细啊，搞得自己在中文各大网站上都没看到过在帧中使用时间函数的例子。直到看到了 Animate.css (https://github.com/daneden/animate.css/blob/master/animate.css)。 今天说一下 css3 的 animate 吧。这两天的学习还是小有所得。将根据几个例子来讲解。准备把 animation 的东西都讲一遍哈。

属性	作用
animation-name	指定一个 @keyframes name 作为动画的全部帧。
animation-duration	动画周期。单位可以指定为 s 或者 ms。
animation-delay	动画开始之前的延时。单位同上。
animation-iteration-count	动画的播放次数。可以是具体数值或者 infinite（表示无限循环）
animation-direction	播放顺序。默认 normal，就是正向播放。其他值为：reverse（倒序播放），alternate（先正向播放，再倒着播放），alternate-reverse（先倒序播放，再正向播放）
animation-fill-mode	这个是用在设置了 animation-delay 的动画上，因为有延时，所以延时这段时间元素的样式是啥样呢？默认 none（啥都没有）。其他值：forwards（元素保留最后一帧的样式），backwards（元素保留第一帧的样式），both（都保留。）
animation-play-state	这个留给 JS 来控制动画的暂停、播放。
animation-timing-function	这个牛逼了，最后讲。用于设置每一帧之间的时间函数。

画重点

在每一帧中，可能没有上一帧用到的属性。这个时候会怎么运行动画呢？

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 200px; left: 100%; }
}

如上面代码，在 30% 的时候，没有用到 left。是不是会猜想 30% 时间点用的是 left：0 呀？不对！left 属性在 30% 中没有，但是在 68% 有 left: 50px，于是乎在动画的 0% 到 68%，left 值会根据 timing-function 从 0 变化到 50px（根据时间函数来指定动画的” 节奏”）。同理，68% 到 100% 时，top 会从一个大于 50px 小于 200px 的值开始，变化到 200px，left 从 50px 变化到 100%。

animation-fill-mode 示例

这个如同定义上说的一样。backwards 表示在延时这段时间内使用第一帧的样式。forwards 是使用最后一帧的样式（比如这个元素的位置改变了，使用了这个 forwards 属性值，并且动画不是无限次，那么动画结束后，元素会留在动画结束的地方。神奇吧。）。

注意直接写 animation: attr1 attr2… 的时候，第一个时间是 duration，第二个时间是 delay，默认的时间函数是 ease，就是先慢后快最后慢。

时间函数

这很 NB。贴个地址，可以自己把玩各种时间函数。http://cubic-bezier.com/ 。cubic-bezier 只是 animation-timing-function 的一个值。表示每一帧开始到下一帧开始这段时间内的时间函数。

steps

这个是时间函数的一个其他值。表示一步一步来。跟 cubic-bezier 的时间函数不一样，它是不连续的、片段的。现在讲一下这个 steps 函数。也比较难懂，我当时也看了好一阵子才领悟。

steps 函数是将两个帧之间的画面按段数分割开，比如 steps (2, start)，表示将每两个帧之间的时间段分为 2 个，并且动画的切换点在第一段的结束。具体可看下图：
css3
start 和 end 都是反的，使用起来一定要注意。正因为如此，看似导致少了一帧。我的做法是将 0% 和 100% 的样式设成相同的，这样不管是 start 还是 end，都不会丢帧。