css过渡需满足可动画属性和正确触发条件，优先使用transform、opacity等硬件加速属性，避免display、height:auto等不可动画属性，并注意transition-delay/duration的精确控制。
CSS 过渡（transition）不是“加了就动”，关键在触发条件和可动画属性——90% 的“不动”问题都出在这两点。
哪些 CSS 属性能用 transition？
不是所有样式改了都会过渡。只有「可计算、有中间值」的属性才支持，比如 opacity、transform、color、width（但注意：display、height（当设为 auto 时）、font-size（部分旧浏览器不稳）就常踩坑）。
常见错误现象：transition: all 0.3s 写了，鼠标悬停却瞬间切换——大概率是改了 display: none → block 或触发了 layout 变化。
- 优先用
transform和opacity：硬件加速、性能好、兼容稳 - 避免对
left/top做过渡：会触发重排，卡顿明显 - 查官方列表最准：MDN 的
transition页面附有「Animatable」标记列
transition 不生效？先看触发时机
过渡必须发生在「同一渲染帧内发生的状态变化」：比如从 :hover 到常态，或 JS 改 className。如果 JS 中先删 class、再加 class，中间隔了重排（如读取 offsetHeight），过渡就断了。
立即学习“前端免费学习笔记（深入）”；
使用场景：按钮悬停缩放、菜单淡入、卡片 hover 抬升——这些都依赖伪类或 class 切换的原子性。
- JS 控制时，用
getComputedStyle(el).opacity强制重排前读取，再改样式 - 别在
transition里写all：既难调试，又可能意外过渡不需要的属性（比如box-shadow模糊半径突变） - 检查是否被父级
overflow: hidden截断了 transform 动画区域
transition-delay 和 transition-duration 的实际影响
delay 是等待多久才开始动，duration 是动多久。但它们只对「直接设置的样式变化」起作用；如果用 JS 批量改多个属性，每个属性得单独配，否则按第一个声明的 delay/duration 走。
参数差异：写成 transition: opacity 0.2s ease-in 0.1s, transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1) 才能分控——省略任意一项，就会继承前一个的值（容易误以为“没生效”）。
- 负的
delay（如-0.1s）会让动画从中间帧开始，适合衔接连续动效 -
duration太短（）人眼难识别，太长（<code>> 0.5s）显得拖沓，0.2–0.3s 是多数交互的舒适区间 - 别依赖
transitionend事件做关键逻辑：它不保证触发（如过渡被新样式打断），且移动端存在兼容差异
真正难的不是写几行 transition，而是判断什么时候该用它、什么时候该换 @keyframes——比如需要循环、多段节奏、或依赖滚动位置驱动时，transition 就不够用了。
