Page 231 - css揭秘

有五个关键字都有其对应的 cubic-bezier() 形式的值。举例来说，ease
等 同 于 cubic-bezier(.25,.1,.25,1)， 因 此 它 的 反 向 版 本 就 是 cubic-
bezier(.1,.25,1,.25)，如图 8-6 所示。通过这种方法，我们的回弹动画就
可以使用 ease 了，并且看起来更加真实：

@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}
.ball {
动画进度 /* 外观样式 */
animation: bounce 3s cubic-bezier(.1,.25,1,.25);
时间 }

图 8-6 借助一款类似 cubic-bezier.com 的图形化工具（参见图 8-7），我们可
ease 调速函数的反向版本 以反复尝试和优化，从而进一步改进这个回弹动画。
试一试 play.csssecrets.io/bounce

在 Dan Eden（http://daneden.me） 编 写 的 animate.css 动 画 库 中，
所用到的调速函数分别是 cubic-bezier(.215,.61,.355,1) 和 cubic-
bezier (.755,.05,.855,.06)（后者并不是前者的反向版本，它的曲线
更加陡峭，效果也更加逼真）。
致 敬

图 8-7
三次贝塞尔曲线有一个饱受诟病的
缺点：在没有可视化界面的情况
下，它极难编辑和理解；用于描述
CSS 动画的调速函数时更是如此。
不过幸运的是，有一些在线工具是
专门为此而生的，比如由笔者倾情
打造的 cubic-bezier.com
动画进度

时间

200 第 8 章 过渡与动画

඀ࠡ JOEC