动画中断主因是@keyframes缺失0%/100%关键帧、未设animation-fill-mode:forwards，或被其他CSS/JS覆盖；需确保起止帧明确定义、启用forwards、避免样式冲突及布局属性混用。
动画突然中断是因为
缺少关键帧
CSS 动画执行到一半就停住，最常见的原因是
规则里没定义
或
（或
/
）状态。
浏览器
无法推断起始或结束样式，就会在中途 fallback 到初始值或卡住。
和
必须成对出现，或至少显式写出
和
如果只写了
，而没写
和
，动画可能从元素当前样式开始，但结束时无目标可落，表现就是“动一半就停”
注意：
不会自动继承元素原始样式；它必须明确定义，否则浏览器按未声明处理（等价于
）
没设导致动画结束后回退
即使
写全了，动画播完也会默认恢复到播放前的状态——看起来就像“动了一半然后弹回去”，其实它完整播完了，只是没留住最终效果。
加
才能让元素停留在
帧的样式上
如果同时用了
，
会让它停在最后一次播放的终点（即
），不是
别混淆
：它同时应用
和
，但
只影响动画开始前的样式，和“中断”无关
动画被其他 CSS 覆盖或重置
看似是动画问题，实则是样式冲突。比如某个父元素设置了
，或者 JS 动态移除了 class，甚至
规则强行覆盖了 keyframes 中的属性。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
检查 DevTools 的 “Computed” 面板，看动画结束时目标属性（如
、
）是否被覆盖成其他值
特别注意：
动画中，如果 keyframes 里写的是
，但元素本身有
，两者不会合并，后者会完全覆盖前者
避免在动画过程中用 JS 直接操作同名 CSS 属性（例如 keyframes 控制
，JS 又设
），这会打断 CSS 动画引擎
浏览器兼容性或
硬件加速
触发失败
某些旧版 Safari 或 Android Webview 对
、
组合不敏感，导致动画帧被丢弃；或 GPU 加速没生效，渲染卡在中间帧。
立即学习
“
前端免费学习笔记（深入）
”；
给动画元素加
或
（仅限真正需要的元素，避免滥用）
避免在
中混用布局触发属性（如
、
、
）和合成属性（如
、
），前者强制重排，易中断
Chrome 有时会在
开启时静音动画，检查系统设置和
是否误配
关键点往往藏在
和
是否真实存在、
是否启用、以及有没有其他样式在背后悄悄改写结果。
@keyframes@keyframes0%100%fromtofromto0%100%50%0%100%0%unsetanimation-fill-mode@keyframesanimation-fill-mode: forwards;100%animation-direction: alternate;forwards100%0%bothforwardsbackwardsbackwardstransform: none;!importanttransformopacitytransformtranslateX(100px)transform: scale(0.9);leftelement.style.left = '20px'will-changetransformtransform: translateZ(0);will-change: transform;@keyframesheightwidthtoptransformopacityprefers-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