timing-function:把过渡的快慢重新塑形
起止值与 duration 定了,中间怎么走由 timing-function 决定。它是一条「输入进度到输出进度」的曲线:内置关键字(ease、linear、ease-in-out 等)是预设的 cubic-bezier;自定义 cubic-bezier(x1,y1,x2,y2) 给两个控制点,
超出
即产生过冲或下冲;steps() 做离散跳变;linear() 多点采样能把弹簧这种多次回弹的曲线塞进来。
建议 · 记住 timing-function 只重塑快慢、不改起止:无论曲线怎么拱,过渡的首末值都不变,变的只是抵达的节奏。它的表达力也有明确上界——cubic-bezier 的
分量是三次多项式,至多两个极值点,所以最多做出「一次下冲加一次过冲」(例如 cubic-bezier(.5,-.6,.5,1.6) 实测在
处降到
、在
处升到
),做不出弹簧那种多段衰减回弹。要弹簧就得靠 linear() 把物理曲线按时间采样成一张查找表,与 CSS Animation 的 spring 页同一招。曲线手感的交互编辑见引擎系列的缓动编辑器。