缓动函数

缓动函数控制动画进度如何随时间变化。linear 匀速，ease 和 cubic-bezier 表达加减速，steps 把连续变化切成离散步。选择缓动应服务于运动的物理感觉和信息理解，不应只凭“看起来顺滑”。

.progress { transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
.frames { animation-timing-function: steps(4, end); }

cubic-bezier 的控制点可以产生回弹式超调；超过 0 到 1 的输出可能让元素短暂越过终点。steps() 适合逐帧、打字机或离散状态，不适合需要连续位置反馈的拖拽。延迟和缓动共同影响用户等待感，应同时考虑可中断性。

实验与练习

让同一个位移分别使用 linear、ease、自定义 cubic-bezier 和 steps。记录开始、过半和结束时的视觉位置，说明哪种曲线适合进度指示、哪种适合状态强调，并检查减少动态偏好。

可运行微实验：区分状态、时间线与合成

为同一元素分别添加 transition、keyframes 和 transform。记录触发条件、持续时间、动画是否可逆、是否影响布局；打开 Performance 面板观察只改 transform 与同时改 width/top 的差异，并在 prefers-reduced-motion: reduce 下验证降级。

常见错误

• 用 steps 模拟连续滚动。
• 使用过大的 overshoot，让按钮看起来越过边界。
• 只比较最终状态，不观察中间反馈和等待时间。

继续阅读

缓动只描述时间曲线，下一篇检查属性和浏览器渲染阶段的成本：动画性能。

练习

1. 用最小输入复现“缓动函数”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案