Page 229 - css揭秘

语境下也被称作“缓动曲线”）。如果不指定调速函数，它就会得到一个默
认值。这个默认的缓动效果并不是我们想像中的匀速效果，而是如图 8-2 所
示。请注意（图 8-2 中粉色圆点所在的位置），当时间进行到一半时，这个
过渡已经推进到 80% 了！

不 论 是 在 animation/transition 简 写 属 性 中， 还 是 在 animation-
timing-function/transition-timing-function 展开式属性中，你都可以
把这个默认的调速函数显式指定为 ease 关键字。不过，由于 ease 本来就是
默认值，这样做并没有什么实际用处。除此以外，还有四种内置的缓动曲线
（如图 8-3 所示），你可以用它们来改变动画的推进方式。

图 8-3
其他内置的调速函数，及其对应
的关键字

动画进度 动画进度

时间 时间

动画进度 动画进度

时间 时间

如你所见，ease-out 是 ease-in 是反向版本。这一对组合正好是实现
回弹效果所需要的：每当小球的运动方向相反时，我们希望调速函数也是相
反的。因此，我们可以在 animation 属性中指定一个通用的调速函数，然
后在关键帧中按需覆盖它。我们希望下落方向上的调速函数是加速的（ease-
out），而弹起方向上是减速的（ease-in）：

@keyframes bounce {
60%, 80%, to {

198 第 8 章 过渡与动画

඀ࠡ JOEC