transition必须写在基础样式里，否则首次hover无动画；应避免all，优先用transform和opacity实现gpu加速；移动端需处理300ms点击延迟。
transition写在hover上还是基础样式里？
必须写在基础样式（非:hover）里，否则第一次悬停会没动画。浏览器只对“属性值变化过程”做过渡，如果初始状态没声明transition，它根本不知道该从哪开始过渡。
- 错误写法：
.btn { } .btn:hover { transition: all 0.3s; }→ 首次hover无动画 - 正确写法：
.btn { transition: background-color 0.3s, transform 0.2s; } .btn:hover { background-color: #007bff; transform: scale(1.05); } - 别偷懒用
all，它会让所有可变属性都参与过渡，比如height意外变化会触发不可控动画
为什么transform + opacity组合比top/left更流畅？
因为transform和opacity能触发GPU加速，而top、left、width等会触发重排（reflow），卡顿明显，尤其在低端设备上。
- 推荐：
transition: transform 0.25s ease-out, opacity 0.25s ease-out; - 避免：
transition: top 0.25s, left 0.25s;—— 即使加了will-change: transform;也难救 -
transform: translateX(10px)比left: 10px渲染效率高一个数量级
transitionend事件监听不到？检查这三处
transitionend 是个容易失效的事件，不是所有过渡都会触发它，尤其当过渡被中断或属性未真正变化时。
- 必须确保目标属性确实发生了变化，比如
opacity从1→1不会触发 - 监听前要加浏览器前缀兼容：
el.addEventListener('transitionend', handler); el.addEventListener('webkitTransitionEnd', handler); - 多个属性过渡时，
transitionend可能触发多次（每个属性一次），用event.propertyName过滤，例如只响应transform：if (event.propertyName === 'transform') { ... }
移动端点击延迟导致transition卡顿？
这不是transition的问题，是移动端默认300ms点击延迟让伪类状态切换滞后，视觉上像动画卡住。
立即学习“前端免费学习笔记（深入）”；
- 加
touch-action: manipulation;到触发元素，能禁用延迟并保留缩放能力 - 或者用
cursor: pointer;配合user-select: none;也能缓解（部分安卓webview有效） - 真要彻底解决，改用
pointerdown/pointerup事件控制class，绕过:active的延迟
过渡本身很简单，难的是判断哪些属性值得动、动多少毫秒才不腻，以及怎么让中断、快速连点、多属性并发这些真实场景不翻车。这些细节不试几次根本记不住。