动画中断主因是js意外重置animation属性或dom重建导致浏览器丢弃中间状态；transition失效因声明被移除，须抽离至基础类；animate.css需同时加animated与动画名类；android需补-webkit前缀及硬件加速。
动画中途卡住或突然停在中间帧
常见现象是：动画开始几秒正常，之后某次触发就直接跳到终态、或完全不动、或只执行了前10%。这不是浏览器崩溃，而是动画状态被 JavaScript 意外“截断”或重置。
根本原因是：animation 属性被 JS 覆盖、清空，或元素被重新 render（如 Vue/React 中 key 变化、列表重排），导致浏览器中断当前动画实例并丢弃中间状态。
- 检查 JS 是否对目标元素执行了
el.style.animation = ''或el.style.setProperty('animation', 'none') - Vue 中若用
v-if切换、或动态修改:key，会销毁重建 DOM，动画必然中断；改用v-show或固定key可避免 - React 中同理：不要在动画进行中调用
setState触发重渲染，尤其当 state 改变导致该元素被 unmount/remount - 使用
getComputedStyle(el).animation在控制台实时观察值是否突变为none或空字符串
transition 动画只执行一次就失效
典型表现：第一次 class 切换有过渡，第二次起就“唰”一下完成。不是缓存问题，而是 transition 声明本身被移除了。
原因在于：你把 transition: opacity 0.3s 写在了会被 classList.remove() 干掉的类里。一旦该类消失，浏览器就失去过渡上下文，后续任何属性变化都跳变。
- 必须将
transition单独抽到一个**永不被 JS 移除的基础类**中，例如.fade-el { transition: opacity 0.3s; } - 状态类只负责值，如
.fade-out { opacity: 0; }和.fade-in { opacity: 1; } - 验证方式：在 Elements 面板中选中元素，看 Computed 标签下
transition是否始终存在，而不是随 class 切换忽有忽无
animate.css 类名添加后没反应
最常踩的坑不是 CDN 没加载，而是类名组合错误或触发时机不对。
- 必须同时加两个类：
animate__animated+ 具体动画名（如animate__bounce），漏掉animate__animated就等于没启动引擎 - 如果元素初始是
display: none或visibility: hidden，动画不会自动播放；需先设为可见，再用setTimeout(() => el.classList.add(...), 0)或requestAnimationFrame延迟一帧触发 - 自定义样式可能覆盖关键属性，比如你写了
.my-btn { animation: none; }，就会直接禁用所有动画 - 检查开发者工具的 Elements → Styles 面板，确认
animation是否被划掉（strikethrough），如果是，说明被更高优先级样式覆盖了
动画在 Android 上不跑，iOS 却正常
这不是兼容性玄学，大概率是 -webkit- 前缀缺失或 keyframes 定义不完整。
- Android 旧版 WebView（尤其 4.x–6.x）对无前缀的
@keyframes和animation支持极差，必须补全@-webkit-keyframes和-webkit-animation - 不要只写
transform: rotate(45deg)，要写成-webkit-transform: rotate(45deg); transform: rotate(45deg); - Animate.css v4+ 已内置前缀，但如果你手动写了 keyframes，就得自己补；可用 Autoprefixer 工具自动处理
- 某些 Android 系统（如 MIUI、EMUI）会默认关闭硬件加速，可在 CSS 中加
will-change: transform;或transform: translateZ(0);强制启用
动画真正难调试的点，往往不在写法本身，而在它和 JS 生命周期、DOM 更新节奏、浏览器渲染管线之间的隐式耦合。一个 class 的增删、一次 setState、甚至 display: none 的切换，都可能让动画无声无息地“断连”。盯着 Computed 样式和动画时间轴，比猜逻辑更可靠。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
