transition-timing-function可用值包括ease、linear、ease-in、ease-out、ease-in-out五个关键字，以及cubic-bezier()和steps()两个函数；ease为默认值，呈缓入缓出；linear为匀速；ease-in仅缓入；ease-out仅缓出；cubic-bezier()支持自定义贝塞尔曲线，y值可超[0,1]实现过冲或回弹；steps()用于分步动画，如打字、雪碧图切换。
transition-timing-function 有哪些可用值
CSS 过渡节奏由 transition-timing-function 控制，它决定属性值随时间变化的快慢分布。浏览器原生支持 5 个关键字值：ease、linear、ease-in、ease-out、ease-in-out，外加两个函数式写法：cubic-bezier() 和 steps()。
其中 ease 是默认值（等价于 cubic-bezier(0.25, 0.1, 0.25, 1)），开头慢、中间快、结尾又慢；linear 是匀速；ease-in 只加速不减速，适合“弹出”类入场；ease-out 只减速不加速，适合“收起”类退场。
cubic-bezier() 怎么调出想要的曲线
cubic-bezier(x1, y1, x2, y2) 是贝塞尔曲线函数，四个参数必须在 [0, 1] 范围内。x 轴代表时间进度（0→1），y 轴代表属性变化比例（0→1）。关键点在于：y 值可以超出 [0, 1]，从而实现“回弹”或“过冲”效果。
- 想让元素先反向移动再正向弹出？试试
cubic-bezier(0.5, -0.5, 0.5, 1.5) - 模拟物理阻尼振动？用
cubic-bezier(0.34, 1.56, 0.64, 1)（注意 y1 > 1） - 调试时建议打开 Chrome DevTools → Elements → Styles 面板，点击 timing function 小图标，直接拖动控制点实时预览
.bounce {
transition: transform 0.4s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
steps() 适合哪些场景
steps(n, [start | end]) 把过渡切成 n 段“帧”，不平滑，常用于模拟打字、进度条分段填充、翻页动画或 sprite 动画切换。
