timing-function:把过渡的快慢重新塑形
起止值与 duration 定了,中间怎么走由 timing-function 决定。它是一条「输入进度 → 输出进度」的曲线:内置关键字 (ease / linear / ease-in-out…) 是预设的 cubic-bezier;自定义
cubic-bezier(x1,y1,x2,y2) 给两个控制点(y 超出 [0,1] 即过冲);steps() 做离散跳变;linear() 多点采样能把弹簧这种多次回弹的曲线塞进来。选一个看曲线与方块运动节奏的对应。
timing-function 只重塑「快慢」,不改起止:无论曲线怎么拱,过渡的首末值都不变,变的是抵达的节奏。cubic-bezier 最多拱一次(做不出多段回弹),所以弹簧效果要靠 linear() 把物理曲线按时间采样成一张查找表——与
CSS Animation 的 spring 页同一招。曲线手感的交互编辑见 引擎系列的缓动编辑器。