transition 必须写在初始状态元素上而非:hover伪类中，否则移出时无过渡；应指定具体属性而非all，优先使用transform、opacity等GPU友好属性，避免触发重排。
transition 该写在哪个元素上才生效？
必须写在「初始状态」的元素上，而不是悬停后的伪类里。很多人把 transition 放在 :hover 里，结果鼠标移入有动画、移出却瞬间跳变——因为移出时样式回退，但没有过渡定义。
-
transition要写在默认状态的选择器中（比如.btn），这样进出都走同一组过渡规则 - 如果只希望移入有动画、移出无动画，才考虑把
transition搬到:hover，但极少这么用 - 不支持
display: none ↔ block过渡，这类切换得用opacity+visibility配合transition
transition-property 写 all 还是具体属性？
优先写具体属性名，比如 background-color、transform、opacity。用 all 看似省事，实际容易翻车：
- 某些属性（如
height、font-size）过渡效果生硬，且影响重排（reflow），卡顿明显 - 浏览器无法对
display、z-index等非连续值做插值，写了也白写 -
all会把未来新增的 CSS 属性也纳入过渡，可能引发意外动画
推荐写法：transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
为什么 hover 动画还是卡顿或闪烁？
常见原因不是写法错，而是触发了昂贵的重排或强制同步布局：
立即学习“前端免费学习笔记（深入）”；
- 修改
width、height、top/left等会触发布局计算，优先改用transform: translateX()或scale() - 在低性能设备上，
ease-in-out比ease更吃资源，可换更轻量的贝塞尔曲线，比如cubic-bezier(0.25, 0.46, 0.45, 0.94) - 没加
will-change: transform;（仅对频繁动画的元素谨慎添加），浏览器来不及提前优化图层
另外，确保父容器没设 overflow: hidden 且子元素动画超出边界——这会导致裁剪+重绘开销飙升。
transition-delay 怎么用才不踩坑？
transition-delay 是延迟「开始过渡」的时间，不是延迟「触发 hover」。它常被误用于“鼠标停留多久后才启动动画”，但实际逻辑是：
- 延迟只对「进入过渡」生效；移出时仍按原
transition-duration执行（除非显式重写） - 若想实现「悬停 300ms 后再动效」，得靠 JavaScript 配合
setTimeout控制 class 切换，CSS 本身做不到条件延迟 - 多个属性不同延时？可以写成：
transition: opacity 0.3s 0.1s, transform 0.35s 0s;—— 注意顺序要和transition-property严格对应
真正丝滑的关键不在参数堆砌，而在克制：只对 GPU 友好的属性做过渡，避免 layout 触发，延迟能不用就不用。
