css3直线运动_【转载】运动曲线提升CSS动画效果

先有UI动画，然后才会有好的UI动画。好的动画会让人惊叹“哇哦！”——因为页面看上去很流畅、很漂亮，最重要的是，自然，一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者 UpLabs这类网站的话，你就会明白我在说什么了。

一些极好的拓展阅读资源:

既然有这么多天才设计师创造了如此漂亮的动画，自然是任何开发者都会想要在自己的项目中引进这些效果。如今，CSS为transition-timing-function提供了一些预置变量，比如ease-in, ease-out 和 ease-in-out, 它们将页面的平滑感和真实感提升了一个档次，但是，你不觉得这个方法太大众化了吗？试想如果页面上的每个动画都用了这3个相同的时间变量，那该是有多乏味啊。 ——(引自: Lukáš Straňák)

transition-timing-function有一个变形是cubic-bezier(n1, n2, n3, n4), 你可以传进4个参数来创建自己独一无二的时间函数。在这篇文章的最后，你将会看到这4个参数各自代表什么——但是，相信我，要找到四个数字来捕获你想象中的转变并不是一件容易事儿。 幸亏有cubic-bezier和Ceasar, 你不必非得自己来完成。这些工具将运动曲线引入到了网页中。——(引自: m-2-h)

运动曲线最早是被动画师们用来创造先进、逼真的动画(比如 Adobe After Effects)。通过cubic-bezier 和Ceasar, 你可以很容易地操纵曲线的形状，另外 (n1, n2, n3, n4) 这4个数字也会为你填好，这绝对超赞! 尽管如此，如果使用时想要最大化运动曲线的功能，你则需要了解它们的工作原理，这就是我们接下来在这篇文章中要讲到的。现在我们开始吧。

理解运动曲线

运动曲线其实只是连接 动画属性 和时间的一个点。一条运动曲线展示了一个动画运动的速度是如何受时间的影响并随之变化的。

运动曲线是连接动画属性和时间的一个点。

让我们拿 distance (translateX) 作为动画属性举例。(这个解释同样适用于其他的任何一个动画属性。)

在一张距离 —— 时间图上计算t1时刻的速度。

如果你有一定的物理学和初级微积分学的基础，你就会知道从一张距离 —— 时间表上算出速度是非常容易的。表中的单位时间内走过的距离除以单位时间得到的某时刻的导数，就是速度。 也就是说，距离 —— 时间曲线上的物体在曲线陡峭的地方有更快的运动速度，而在曲线平缓的地方，速度则比较慢。如果你知道它的原理，那太棒了！说明你已经做好了充足的准备，可以跳过下面这节。

如今，我意识到设计和开发是完全不同的领域，毕竟不是每个人都有相同的背景。 也许上面那段话你完全听不懂，也用不着灰心丧气，因为我接下来会慢慢解释的。

看到下面的红盒了吗？请允许我童心未泯地将之称为“Boxy”；这样提及它时会更方便一些。好了，我们可以看到Boxy正在以线性的方式从屏幕的一边移动到另一边，接下来我们来分析一下它的运动。

transition-timing-function 的一个预置参数是linear。为了让Boxy动起来，我们要做的就是添加下面的这个方法。

.moveForward {

transform: translateX(1000px);

}

为了控制动画效果，我们会为Boxy设transition属性，如下所示：

#boxy {

width: 200px;

heigh