CSS动画只执行一半？检查keyframes是否完整

CSS动画执行一半就中断，往往并非代码有误，而是几个关键细节被忽略：@keyframes中缺失0%或100%关键帧导致浏览器无法确定起止状态；未设置animation-fill-mode: forwards致使动画播完立即回退；或是其他CSS规则、JS操作甚至系统偏好设置（如减少动画）意外覆盖或抑制了动画效果——真正的问题常藏在看似完整的代码背后，只需逐一排查起止帧定义、样式留存策略与潜在冲突，就能让动画丝滑到底。

动画突然中断是因为 @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;
}

终于介绍完啦！小伙伴们，这篇关于《CSS动画只执行一半？检查keyframes是否完整》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！