CSS 缓动曲线

常见问题

这些值放在哪里？

放进 transition-timing-function 或 animation-timing-function 属性，或者 transition 简写的时序位置，例如 transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1)。关键字条目（ease、ease-in 等）是浏览器内置的，cubic-bezier() 值在所有现代浏览器中都可用。

色块怎么看？

横轴是从开始到结束的时间，纵轴是数值移动的程度。起步平缓、结尾陡峭的曲线（ease-in）先慢后快；相反形状（ease-out）先快后稳。两条浅色横线标记 0 和 1，back 系列越界回弹的区间一目了然。

out 曲线和 in 曲线怎么选？

在 UI 中，ease-out 系列几乎是默认选择：动作快速启动、减速落位时界面显得响应灵敏。ease-in 系列主要用于离开屏幕的元素，in-out 系列用于在屏幕内开始并结束的移动，比如卡片换位。

back 曲线里的负值是什么意思？

控制点超出 0 到 1 的范围时，数值会先越过起点或终点再回落，读起来像一次小回弹。它适合 translate、scale 这类 transform，但要避免用在会被截断的属性上，比如 opacity，越界部分会被直接裁掉。