CSS 与布局 / CSS Transition · 状态间的隐式动画 / timing-function:把过渡的快慢重新塑形 待审核 3 / 6
cubic-bezier · steps · linear() spring

timing-function:把过渡的快慢重新塑形

起止值与 duration 定了,中间怎么走由 timing-function 决定。它是一条「输入进度到输出进度」的曲线:内置关键字(easelinearease-in-out 等)是预设的 cubic-bezier;自定义 cubic-bezier(x1,y1,x2,y2) 给两个控制点,yy 超出 [0,1][0,1] 即产生过冲或下冲;steps() 做离散跳变;linear() 多点采样能把弹簧这种多次回弹的曲线塞进来。

图 1-1 · 可拖动控制点或切换函数,左侧曲线与右侧方块的运动节奏实时对应。

建议 · 记住 timing-function 只重塑快慢、不改起止:无论曲线怎么拱,过渡的首末值都不变,变的只是抵达的节奏。它的表达力也有明确上界——cubic-bezieryy 分量是三次多项式,至多两个极值点,所以最多做出「一次下冲加一次过冲」(例如 cubic-bezier(.5,-.6,.5,1.6) 实测在 t0.12t \approx 0.12 处降到 0.105-0.105、在 t0.88t \approx 0.88 处升到 1.1051.105),做不出弹簧那种多段衰减回弹。要弹簧就得靠 linear() 把物理曲线按时间采样成一张查找表,与 CSS Animation 的 spring 页同一招。曲线手感的交互编辑见引擎系列的缓动编辑器

图 1-2 · 当前曲线对应的 CSS 写法,随上方选择同步生成。