Twitter的“fave” 动画

最近 Twitter 通过引入一段新的动画重新设计了“fave”按钮（也叫“fav”）。这段动画并不依赖 CSS transition，而是由一系列图片组成的。下面展示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数（timing function）重新制作这段动画。

运动产生的错觉

这段动画的效果类似于观看古老的西洋镜，该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中，我们不使用圆筒，而是在某个元素内部呈现一系列图片。

示例

把鼠标悬停在星星上就可以看到动画效果（请到原文查看动画效果——译者注）。

在本示例中，我们将从制作一系列能组成动画的图片开始。在这里，我们使用来自 Twitter 的“fave”图标动画的部分图片集：

为了能让这些帧动起来，我们需要把它们放置在一排上。在这个文件中，这些帧已经排列在一排上了，这意味着我们可以通过设置背景位置（background-position）属性使背景从第一帧过渡到最后一帧。

Steps() 时序函数

大多数的时序函数，例如 ease（缓冲）和 cubic-bezier（三次贝塞尔），都能让元素从初始状态平滑地过渡到最终状态。steps 时序函数与此不同，它并不是平滑地过渡，而是将过渡过程分割为一定数量的步骤，并且在这些步骤之间快速地移动。

我们先建立如下的 HTML 代码：

背景图片

接下来， 我们可以添加一些样式并设置背景图片位置：

加了悬停状态后，一旦鼠标悬停在该元素上，背景就会从我们指定的位置移动到这一系列图片中最后一张的位置上（为了兼容浏览器，注意要添加相应的浏览器内核前缀——译者注）。

请注意第1个规则 animation。在本例中，我们利用 steps 时序函数，让background-position 属性经历了一个持续时间为1秒的过渡。在 steps 部分的“55”这个值，代表了这段动画是由55帧组成的。

当我们将鼠标悬停在这个元素上时，所看到的效果是其背景图片通过55个相同的步骤经历了一次过渡。

另外这个案例，也可以用 transition 实现：

为什么不使用gif？

虽然也可以使用 gif 动画，但在这个案例中并不是很合适。gif 文件的大小通常较大并且帧速率也难以控制。而使用这个方式，我们就可以用 CSS 对这个动画进行停止、倒回以及各种各样的调整。

“steps()”的其它用法

背景动画精灵（background sprites）仅仅只是 steps 时序函数的用法之一。除此之外该函数还适用于制作任何需要一系列离散步骤的动画。例如，你可以用该函数制作一个摆钟。

备忘小条

如果你喜欢这篇文章，你可以将它分享在Twitter，或者保存下面的备忘小条，以便参考。