Page 227 - css揭秘

42 缓动效果

背景知识

基本的 CSS 过渡，基本的 CSS 动画

难题

给过渡和动画加上缓动效果（比如具有回弹效果的过渡过程）是一种流
行的表现手法，可以让界面显得更加生动和真实：在现实世界中，物体从 A
点到 B 点的移动往往不是完全匀速的。

以纯技术的角度来看，回弹效果是指当一个过渡达到最终值时，往回
倒一点，然后再次回到最终值，如此往复一次或多次，并逐渐收敛，最终稳
定在最终值。举个例子，假设要用一个元素来模拟一个下落的小球（参见图
1①
8-1），我们会把 transform 属性 从 none 过渡到 translateY(350px) 来模
拟这个下落过程。

实际上，回弹效果并不只对位移动画有帮助。对几乎所有类型的过渡动
画来说，它都可以显著增强动画的体验，其中包括：

„ 尺寸变化（比如：元素在 :hover 时变大，弹出框从 transform:
scale(0) 的状态开始放大显示，柱状图中的每根柱子动态地冒出
来，等等）
„ 角度变化（比如：元素的旋转动作，饼图中的各个扇区以动画的方
式从 0°开始展开为实际大小，等等）
有相当多的 JavaScript 类库可以创建动画，且内置回弹效果。但在眼
下，我们其实已经不需要借助脚本来实现过渡和动画了。不过，在 CSS 中
实现回弹效果的最佳方式是什么呢？

① 为什么在这里采用变形属性来表现物体的下落，而不是类似 top 或 margin-top 这样的属
性？在编写本书时，变形属性的动画过程更加流畅；而其他 CSS 属性由于需要对齐到像素，
往往略显生硬。

196 第 8 章 过渡与动画

඀ࠡ JOEC