CSS过渡必须写在常态选择器中且目标属性需有明确数值起止值；display等不支持属性需用opacity或max-height替代；JS动态修改时须强制重排确保动画触发。
新手写 CSS 过渡（transition）时，最常卡在“看起来写了，但动画就是不生效”——其实绝大多数情况不是语法错，而是过渡该放在哪、什么时候能触发这两个底层逻辑没理清。
过渡必须写在“常态”选择器里，不能只写在 :hover 或其他伪类中
很多人会这样写：
.box:hover { width: 300px; transition: width 0.3s; }
结果是：鼠标悬停时宽度瞬间变大，移开时又“啪”一下弹回。因为 transition 只在 hover 状态下才存在，浏览器根本不知道“怎么从 300px 回到原宽”。
✅ 正确做法：把 transition 放在元素的默认样式里（比如 .box），只把变化的属性（如 width、transform、opacity）写在 :hover 中：
立即学习“前端免费学习笔记（深入）”；
.box { width: 200px; transition: width 0.3s ease; }.box:hover { width: 300px; }
过渡目标属性必须有明确的起始值和可计算的变化路径
浏览器只能对“两个确定数值之间”的变化做插值动画。常见失效场景：
-
height: auto → height: 200px：auto 不是具体数值，无法过渡 → 改用max-height或 JS 控制 -
width: 100% → width: 300px：百分比和像素单位混合，部分浏览器难计算 → 尽量统一单位（都用 px 或都用 rem） -
display: none ↔ display: block：display 不支持过渡 → 改用opacity + visibility或max-height模拟显隐
元素必须具备“可响应尺寸/位置变化”的基础样式
有些属性看似能动，实则被布局限制住了：
-
width对display: inline元素无效 → 改为inline-block或block -
top/left需要position: relative/absolute/fixed才生效 → 这个position必须在常态下就定义好，不能只写在:hover里 -
transform虽然不需要定位上下文，但若父容器设了overflow: hidden，动画过程可能被意外裁剪
JS 动态修改时容易跳过动画，因为浏览器没来得及“看到初始状态”
用 JS 直接改样式，比如：
el.style.width = '300px';
如果之前没设过初始 width，或 DOM 渲染还没完成，浏览器就直接跳到终点。解决方法是“强制重排”：
- 先设置初始值：
el.style.width = '200px'; - 触发重排：
void el.offsetWidth;（读取一个布局相关属性即可） - 再设目标值：
el.style.width = '300px';
