动画中断主因是@keyframes缺失0%/100%关键帧、未设animation-fill-mode:forwards，或被其他CSS/JS覆盖；需确保起止帧明确定义、启用forwards、避免样式冲突及布局属性混用。
动画突然中断是因为 @keyframes 缺少关键帧
CSS 动画执行到一半就停住，最常见的原因是 @keyframes 规则里没定义 0% 或 100%（或 from/to）状态。浏览器无法推断起始或结束样式，就会在中途 fallback 到初始值或卡住。
-
from和to必须成对出现，或至少显式写出0%和100% - 如果只写了
50%，而没写0%和100%，动画可能从元素当前样式开始，但结束时无目标可落，表现就是“动一半就停” - 注意：
0%不会自动继承元素原始样式；它必须明确定义，否则浏览器按未声明处理（等价于unset）
animation-fill-mode 没设导致动画结束后回退
即使 @keyframes 写全了，动画播完也会默认恢复到播放前的状态——看起来就像“动了一半然后弹回去”，其实它完整播完了，只是没留住最终效果。
- 加
animation-fill-mode: forwards;才能让元素停留在100%帧的样式上 - 如果同时用了
animation-direction: alternate;，forwards会让它停在最后一次播放的终点（即100%），不是0% - 别混淆
both：它同时应用forwards和backwards，但backwards只影响动画开始前的样式，和“中断”无关
动画被其他 CSS 覆盖或重置
看似是动画问题，实则是样式冲突。比如某个父元素设置了 transform: none;，或者 JS 动态移除了 class，甚至 !important 规则强行覆盖了 keyframes 中的属性。
- 检查 DevTools 的 “Computed” 面板，看动画结束时目标属性（如
transform、opacity）是否被覆盖成其他值 - 特别注意：
transform动画中，如果 keyframes 里写的是translateX(100px)，但元素本身有transform: scale(0.9);，两者不会合并，后者会完全覆盖前者 - 避免在动画过程中用 JS 直接操作同名 CSS 属性（例如 keyframes 控制
left，JS 又设element.style.left = '20px'），这会打断 CSS 动画引擎
浏览器兼容性或硬件加速触发失败
某些旧版 Safari 或 Android Webview 对 will-change、transform 组合不敏感，导致动画帧被丢弃；或 GPU 加速没生效，渲染卡在中间帧。
立即学习“前端免费学习笔记（深入）”；
- 给动画元素加
transform: translateZ(0);或will-change: transform;（仅限真正需要的元素，避免滥用） - 避免在
@keyframes中混用布局触发属性（如height、width、top）和合成属性（如transform、opacity），前者强制重排，易中断 - Chrome 有时会在
prefers-reduced-motion: reduce开启时静音动画，检查系统设置和@media (prefers-reduced-motion)是否误配
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated-element {
animation: slideIn 0.3s ease-out forwards;
}
关键点往往藏在 0% 和 100% 是否真实存在、forwards 是否启用、以及有没有其他样式在背后悄悄改写结果。 
