transition必须写在初始状态中，而非:hover或切换后的类里，否则进入无动画；仅数值型可插值属性（如color、transform）支持过渡；timing-function推荐cubic-bezier自定义节奏；delay会影响正反向过渡，需分别设置。
transition 必须写在初始状态里，不能只写在:hover或类切换后
很多人把 transition 放在 :hover 规则里，结果动画不触发或只回退有动画、进入没动画。这是因为 transition 只对「属性值变化过程」起作用，而浏览器只在元素从「有该声明的样式」变到「另一套有不同值的样式」时才启动过渡。初始状态没写 transition，等于告诉浏览器：“这次变化不走平滑路径”。
正确做法是把 transition 声明放在基础类（如 .btn）中，而不是仅放在 .btn:hover 里。
-
transition要写在触发前就生效的规则中，通常是默认状态或初始 class - 如果用 JS 切换 class（如
el.classList.toggle("active")），同样要把transition放在未切换前的那个 class 里 - 避免写成
.box:hover { transition: all 0.3s; }—— 这不会让 hover 进入产生动画
哪些 CSS 属性能被 transition 平滑过渡？
不是所有属性都支持过渡。比如 display、height（当值为 auto 时）、font-family、content 都无法过渡。浏览器只对“可计算、可插值”的数值型属性做补间处理。
常见可过渡属性包括：color、background-color、opacity、transform、width/height（需为具体数值，不能是 auto 或 100%）、margin/padding、font-size、border-width 等。
-
transform和opacity是性能最优的选择，触发动画时走 GPU 合成层，不触发重排（reflow） - 慎用
width/height+auto：浏览器无法计算起始/结束值，过渡会失效或跳变 - 想过渡高度但内容高度不确定？改用
max-height配合足够大的目标值（如max-height: 500px），并设overflow: hidden
transition-timing-function 不是只有 ease 和 linear
ease 是默认值，但它容易被误认为“最自然”；实际场景中它在中间段速度偏快，起止不够柔和。真正控制节奏的是 cubic-bezier() 函数，四个参数决定了贝塞尔曲线的形状。
例如：transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); 就是一个常用缓出加强版，比 ease-out 更有张力；而 cubic-bezier(0.16, 1, 0.3, 1) 是更激进的“弹性收尾”效果。
- 用 cubic-bezier.com 可视化调试曲线，拖动控制点实时预览
- 不要滥用
all+ 复杂 timing-function：多个属性用不同曲线会导致节奏混乱，建议显式列出关键属性并分别指定 timing -
steps()是离散过渡函数，适合模拟打字、帧动画等非连续效果，和cubic-bezier()完全不同用途
transition-delay 容易被忽略的执行时机问题
transition-delay 的延迟是从「样式变更发生那一刻」开始计时，不是从鼠标移上元素那一刻。这意味着：如果用户快速进出元素，可能 delay 还没跑完，新状态又来了，导致动画被中断或跳过。
更隐蔽的问题是，delay 对「反向过渡」（比如从 hover 回到默认）也生效。如果你写了 transition: background-color 0.3s ease 0.1s，那么鼠标移出时也会等 0.1s 才开始淡出 —— 这通常不符合直觉。
- 需要「进入有延迟、退出无延迟」？得拆成两个独立声明：
transition: background-color 0.3s ease 0.1s;放在默认状态，再在:hover里覆盖为transition: background-color 0.3s ease 0s; - JS 控制的过渡中，delay 会和 JS 执行时机叠加，比如
setTimeout(() => el.classList.add("active"), 100)+transition-delay: 0.2s，实际总延迟是 0.3s - 移动端 touch 事件响应慢，delay > 0.1s 可能造成明显卡顿感，建议谨慎使用
transition 就会力不从心，得切到 @keyframes 或 JS 动画库。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
