transition-timing-function 支持 ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end 等预设值，分别对应不同缓动效果，如 ease 先慢后快再慢，linear 匀速，step-start 立即跳转。
transition-timing-function 支持哪些预设值
transition-timing-function 用来定义 CSS 过渡过程中的速度曲线，不是“时间函数”而是“缓动函数”。它不控制时长（那是 transition-duration 的事），只管“快慢分布”。浏览器原生支持的关键词有：ease、linear、ease-in、ease-out、ease-in-out，还有实验性但已广泛支持的 step-start 和 step-end。
这些值对应不同场景：
-
ease（默认）：先慢 → 快 → 慢，适合大多数 UI 变化，比如按钮悬停缩放 -
linear：匀速，适合进度条、纯位移类动画，但人眼容易觉得“机械” -
ease-in：从静止缓慢启动，适合弹出层入场（避免突兀） -
ease-out：结束前减速，适合菜单收起、提示框消失 -
step-start：立即跳到终点，常用于模拟打字、逐帧切换（如 checkbox 状态切换）
如何用 cubic-bezier() 自定义节奏
预设值不够用时，cubic-bezier(x1, y1, x2, y2) 是最常用也最灵活的方式。四个参数是贝塞尔曲线两个控制点的坐标，x 必须在 [0, 1] 区间，y 可以超出（实现“回弹”或“过冲”效果）。
常见自定义场景：
立即学习“前端免费学习笔记（深入）”；
- 快速启动 + 平稳收尾：
cubic-bezier(0.25, 0.46, 0.45, 0.94)（Material Design 推荐的 standard easing） - 轻微回弹效果（y2 > 1）：
cubic-bezier(0.25, 0.1, 0.25, 1.5)，注意别过度，否则动画显得“晃” - 慢启动 + 快收尾（类似
ease-in但更可控）：cubic-bezier(0.42, 0, 1, 1)
调试建议：用 Chrome DevTools 的动画检查器（Elements → Styles → 点击 timing function 小图标），拖动控制点实时预览，比手算系数靠谱得多。
