CSS过渡只在属性值变化时触发一次，需确保常态下定义transition、用伪类或JS切换状态；循环动效应改用animation；JS切换类名需避免重排陷阱。
CSS过渡效果只生效一次，通常是因为样式变化没有持续触发——比如只在初始加载时应用了一次，之后缺少像 :hover、:focus、:active 这类伪类，或没有通过 JavaScript 动态切换类名来反复触发动画。
确认是否依赖伪类但未正确悬停
过渡（transition）本身是被动的，它不会自动循环或重放，只在元素的可动画属性值发生变化时执行一次。如果你写了：
button {
background: blue;
transition: background 0.3s;
}
button:hover {
background: red;
}
那只有鼠标移入时变红、移出时变回蓝，两次变化都会触发过渡。但如果只写 button { background: red; transition: ...; } 而没后续状态变化，那就只在首次渲染时“从默认色变到红色”——可能你根本没注意到初始变化，误以为没生效。
- 用浏览器开发者工具检查元素实际计算后的
background值，确认悬停前后是否真有差异 - 确保父容器没阻止 pointer 事件（例如
pointer-events: none） - 移动端注意：
:hover在多数触摸设备上不触发，应搭配:active或 JS 的touchstart/touchend
检查 transition 属性是否写在“稳定状态”上
过渡声明必须写在**常态规则**中（比如 button），而不是仅写在 :hover 里：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
button { transition: all 0.2s; } button:hover { color: #f00; } - ❌ 错误：
button:hover { transition: all 0.2s; color: #f00; }—— 这样移入时无过渡，因为 transition 本身没在常态下定义
需要重复播放？别依赖 transition，改用 animation
如果目标是让某个效果反复出现（比如按钮呼吸闪烁、图标旋转），transition 不适合——它天生是一次性响应式变化。此时应使用 @keyframes + animation：
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.btn-pulse {
animation: pulse 2s infinite;
}
animation 天然支持 infinite、alternate 等控制方式，更适合循环动效。
JS 切换类名时过渡失效？可能是“重排陷阱”
用 JS 添加类后立刻移除，浏览器可能合并渲染，导致过渡来不及触发。例如：
btn.classList.add('active');
btn.classList.remove('active'); // 这样过渡不会发生
解决方法：用 offsetHeight 或 getComputedStyle 强制重排，或用 setTimeout 分开两帧：
- ✅ 推荐：
btn.classList.add('active'); setTimeout(() => btn.classList.remove('active'), 10); - ✅ 更稳妥：
btn.classList.add('active'); void btn.offsetWidth; btn.classList.remove('active');
不复杂但容易忽略。核心就一条：transition 看的是“属性值变了没”，不是“你想不想动”。值不变，它就安静待着。
