transition必须写在要变化的元素本身上，如button而非父容器或伪元素；仅支持可计算、有中间值的属性（如opacity、transform）；timing-function推荐cubic-bezier(0.25,0.46,0.45,0.94)等自然曲线。
transition 该写在哪个元素上才生效
必须写在要变化的元素本身上，不是父容器，也不是伪元素（除非你明确想控制伪元素的过渡）。比如想让按钮背景色 hover 时平滑变色，transition 得加在 button 选择器里，而不是 .btn-container。
常见错误是把 transition 写在触发状态（如 :hover）里，结果只有进入有动画、离开立刻跳变——正确做法是写在默认状态中：
button {
background: #007bff;
transition: background-color 0.3s ease; /* ✅ 这里定义 */
}
button:hover {
background-color: #0056b3; /* ❌ 不在这里写 transition */
}哪些 CSS 属性支持 transition
不是所有属性都能过渡。只有「可计算、有中间值」的属性才行，比如 opacity、transform、color、width（但注意：从 auto 变化不生效）、background-color。
以下属性通常不支持或效果不可靠：
立即学习“前端免费学习笔记（深入）”；
-
display（none↔block无法插值，改用visibility+opacity） -
height/width从auto开始（浏览器无法算出起始数值） -
font-size用rem或em时若根字体动态变化，可能意外中断过渡
最稳妥的组合是 transform + opacity：它们触发硬件加速，且无布局影响。
transition-timing-function 怎么选才自然
ease 是默认值，但多数时候它“开头慢、中间快、结尾又慢”，并不符合人眼对真实运动的预期。真正顺滑的交互往往用：
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)（即ease-in-out的增强版，常用于 Material Design） -
ease-out：适合收尾强调（如菜单关闭、弹窗退出） -
steps(4, end)：做逐帧动画（如加载指示器、翻页效果），不是平滑过渡，但属于transition-timing-function的合法值
避免滥用 linear——机械匀速反而显得僵硬，尤其在小范围变化（如 2px 位移）时特别明显。
transition-delay 和触发时机的陷阱
transition-delay 看似简单，但容易和 JS 操作冲突。比如用 JS 动态加 class 触发过渡，如果 class 添加后立即修改样式，浏览器可能合并渲染，导致 delay 失效。
更隐蔽的问题是：当多个属性同时过渡，但设置了不同 delay 或 duration，离开时容易出现“错层”——比如背景色已恢复，边框阴影还在动。此时建议：
- 统一用
transition-property: all要谨慎，最好显式列出关键属性（如transition: opacity 0.2s, transform 0.25s） - 需要精确同步时，用
transform替代top/left，因为后者触发布局重排，延迟更难控制 - 移动端要注意
:active状态持续时间极短（约 10ms），transition-delay大于这个值就根本看不到效果
真正难调的从来不是怎么写 transition，而是搞清「哪一帧开始算过渡起点」——CSS 动画的起点永远是样式计算完成后的下一帧，而 JS 改样式是否触发了重排、是否被浏览器优化掉，都会悄悄改变这个起点。
