transition-duration 控制过渡持续时间，单位必须为 s 或 ms，仅对属性值变化生效，不支持循环；transition-delay 控制延迟启动，支持负值跳过前段；timing-function 调节运动节奏，需与属性顺序匹配；过渡启停依赖状态切换，无法原生暂停，中途保持帧需改用 animation。
transition-duration 控制动画跑多快
动画持续时间由 transition-duration 决定，单位必须是 s 或 ms，写成 0.3 或 300 都会失效——浏览器不认纯数字。它只对「属性值变化时」起作用，比如 background-color 从 red 变 blue，或者 transform 从 scale(1) 到 scale(1.2)。
常见错误是把它和 animation-duration 混用：transition 不是循环播放的动画，它只响应一次状态切换（如 hover、focus、class 切换），没有迭代次数或方向控制。
-
transition-duration: 0.3s是合法写法，transition-duration: 300ms同样有效 - 设为
0s会让过渡完全消失，变成瞬时切换（但仍有 transition 触发逻辑） - 多个属性过渡时，可统一设一个时间，也可用逗号分隔分别指定：
transition-duration: 0.3s, 0.6s
transition-delay 决定动画等多久才开始
transition-delay 是在状态变化（比如鼠标移上）发生后，延迟多久才启动过渡效果。它不影响动画本身长度，只影响“起跑时间”。负值允许提前启动——比如设为 -0.1s，意味着动画会从中间某一帧开始播放，常用于让多个元素过渡产生错落感。
注意：延迟只对首次触发生效；如果状态反复切换（如快速 hover 进出），浏览器可能丢弃未完成的过渡，延迟会重新计算。
立即学习“前端免费学习笔记（深入）”；
- 正数延迟（
0.2s）适合做“稍等一下再动”的交互反馈 - 负延迟（
-0.15s）配合transition-duration: 0.5s，相当于跳过前 30% 动画 - 延迟对
transition-property中未列出的属性无效——哪怕该属性本可以过渡
用 transition-timing-function 调整运动节奏
光有时间和延迟还不够，运动快慢分布才是真实体验的关键。transition-timing-function 默认是 ease（缓入缓出），但多数 UI 需要更明确的节奏：比如按钮按下的反馈常用 ease-out（先快后慢），侧边栏展开适合 ease-in（慢启快收）。
贝塞尔曲线参数必须是四个数值，漏掉一个或写错顺序（如 cubic-bezier(0.4, 0, 1, 1) 写成 cubic-bezier(0.4, 0, 1)）会导致整个声明被忽略，退回到 ease。
button {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1),
background-color 0.3s ease-out;
}
-
linear适合机械感强的操作（如进度条填充） -
steps(4, end)用于帧动画式过渡（如加载指示器的阶梯式跳变） - 多个属性过渡时，timing function 可分别对应，用逗号隔开，顺序必须和
transition-property一致
如何可靠地启动与停止过渡
过渡本身没有“播放/暂停”API，它的启停完全依赖 CSS 状态是否改变。所谓“停止”，本质是中断当前过渡并重置状态——比如移除触发类、还原属性值、或强制重排（offsetHeight 读取）来清空队列。
最稳妥的启动方式是通过 class 切换，而非直接操作 style：后者容易绕过 transition 机制，尤其在 JS 批量修改时。
- 想强制重新触发同一过渡（比如重复点击按钮），需在移除 class 后加
void element.offsetWidth或element.offsetHeight强制重排 - 用
getComputedStyle(element).transitionProperty可检测当前是否启用过渡，但无法判断是否正在运行 - 过渡中修改同一属性会打断当前动画，从新起点重新开始——不是继续跑完，这点和
animation不同
真正难处理的是“中途暂停并保持在某一帧”，这超出了 transition 的能力范围，得换 animation + animation-play-state，或者用 transform + requestAnimationFrame 手动控制。
