如何通过transition-timing-function属性调整CSS过渡动画的节奏？

本文共计1049个文字，预计阅读时间需要5分钟。

`transition-timing-function` 用于定义 CSS 过渡过程中的速度曲线，它不是时间函数而是缓动函数。它不控制过渡的持续时间（那是 `transition-duration` 的事情），只管理快慢分布。

这些值对应不同场景：

• ease（默认）：先慢 → 快 → 慢，适合大多数 UI 变化，比如按钮悬停缩放
• linear：匀速，适合进度条、纯位移类动画，但人眼容易觉得“机械”
• ease-in：从静止缓慢启动，适合弹出层入场（避免突兀）
• ease-out：结束前减速，适合菜单收起、提示框消失
• step-start：立即跳到终点，常用于模拟打字、逐帧切换（如 checkbox 状态切换）

如何用 cubic-bezier() 自定义节奏

预设值不够用时，cubic-bezier(x1, y1, x2, y2) 是最常用也最灵活的方式。四个参数是贝塞尔曲线两个控制点的坐标，x 必须在 [0, 1] 区间，y 可以超出（实现“回弹”或“过冲”效果）。