transition必须写在默认状态而非:hover中，否则移出时无过渡；仅opacity、transform等可硬件加速属性适合过渡，display等不可插值属性完全不支持。
直接用 transition 就能加平滑过渡，但写错位置或选错属性，动画就根本不会动——不是浏览器不支持，而是 CSS 规则没生效。
transition 必须写在默认状态，不能只放 :hover 里
鼠标悬停时有动画、移开却“啪”一下跳回，这是最常见问题。根源是把 transition 塞进了 :hover 选择器，导致离开时规则消失，浏览器直接回退到初始值，不走过渡。
- 正确做法：把
transition声明放在元素的基础样式中（比如.btn或button），确保它同时作用于进入和离开两个方向 - 即使只改一个属性（如
background-color），也要保证基础态和悬停态都有明确值；否则浏览器可能从none或未定义状态开始过渡，行为不可控 - 示例：
.btn { background-color: #4A90E2; transition: background-color 0.3s ease-in-out; } .btn:hover { background-color: #1E5799; }
只对可动画化属性用 transition，别碰 display、font-size
transition 不是万能的，只有「可动画化」的 CSS 属性才支持。写了无效属性，浏览器静默忽略，你完全看不到效果。
- 推荐优先使用：
opacity、transform（性能最好，触发 GPU 加速）、background-color、color、border-color - 慎用：
width、height、margin、padding——它们会触发重排（layout），容易卡顿 - 明确无效：
display、z-index、font-size（部分浏览器能动但不可靠）、box-shadow（可能意外重绘抖动） - 避免
transition: all 0.3s：它会监听所有变化，包括你没意识到的padding或font-size，反而拖慢渲染
用 transform + opacity 组合比纯 background-color 更稳
纯背景色过渡在深色/浅色模式切换或高对比场景下容易生硬，低端设备上也可能轻微卡顿。真正顺滑的方案是组合硬件加速属性。
立即学习“前端免费学习笔记（深入）”；
-
transform和opacity天然走合成层，不干扰布局，动画帧率更稳定 - 位移用
transform: translateY(-2px)，别用margin-top: -2px；缩放用scale(1.03)，别依赖width/height - 示例：
.btn { opacity: 1; transform: scale(1); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn:hover { opacity: 0.9; transform: scale(1.03) translateY(-2px); } - 如果目标是表格行或导航菜单，同样适用——给
tr或.nav-item加transform和opacity，比改background-color更安全
JS 动态操作后 transition 不生效？先强制重排
用 JS 插入新元素、切换 class 或更新数据后，动画“一闪而过”或根本不播，通常是因为浏览器把 DOM 变更和样式计算合并为一次渲染，没机会捕获过渡起点。
- 解决方法：在加动画 class 前，读一次布局属性（如
offsetHeight），强制触发重排，让浏览器记住初始状态 - 示例：
newRow.classList.add('fade-in'); void newRow.offsetHeight; newRow.classList.add('fade-in-active'); - 如果用了框架（Vue/React），确保操作的是已挂载的真实 DOM 节点，或等
nextTick/useEffect完成后再进startViewTransition - 注意：自定义滚动容器（
overflow: auto的 div）要单独设scroll-behavior: smooth，根html上的设置对其无效
真正难的不是写几行 transition，而是理解它何时被浏览器忽略——比如父元素 overflow: hidden 裁掉了 hover 区域，或者媒体查询里悄悄覆盖了 transition 声明。这些细节不查 DevTools 的 Computed 面板，几乎没法定位。
