Page 228 - css揭秘

图 8-1
一个逼真的弹跳动作

弹跳动画

我们的第一感觉可能就是使用 CSS 动画，并设置如下关键帧：

@keyframes bounce {
60%, 80%, to { transform: translateY(350px); }
70% { transform: translateY(250px); }
90% { transform: translateY(300px); }
}

.ball {
/* 尺寸样式、颜色样式等 */
animation: bounce 3s;
}

这段代码所描述的关键帧正好对应了图 8-1 中的每一个阶段。但是，如
果你跑一遍这个动画，会发现它显得很不真实。主要原因在于，每当这个小 动画进度
球改变运动方向时，它的移动过程都是持续加速的，这看起来很不自然。产
时间
生这个结果的原因在于，它的调速函数在所有关键帧的衔接中都是一样的。
图 8-2
你可能会问：“它的调速……什么？”所有过渡和动画都是跟一条曲线 所有过渡和动画的默认调速函数
有关的，这条曲线指定了动画过程在整段时间中是如何推进的（它在某些 （ease）

42 缓动效果 197

඀ࠡ JOEC