css css 动画无法触发怎么办_检查 animation name 是否匹配

animation-name值必须与@keyframes名称完全一致，大小写、连字符等细微差异均导致动画静默失效；还需确保animation-duration等必要属性存在，且元素display不为none。

animation-name 值必须与 @keyframes 名称完全一致

CSS 动画不触发，最常见的原因是 animation-name 属性写的名称和 @keyframes 规则名对不上——哪怕只差一个空格、大小写或连字符，浏览器都会静默忽略动画。

• @keyframes slideIn 对应的 animation-name: slideIn ✅
• @keyframes slideIn 写成 animation-name: slidein ❌（大小写敏感）
• @keyframes slide-in 写成 animation-name: slide_in ❌（连字符 ≠ 下划线）
• 定义在 标签里但拼错，或被后续同名规则覆盖，也会失效

检查 @keyframes 是否被正确加载和解析

浏览器不会报错提示 @keyframes 未定义，只会跳过动画。可通过开发者工具「Styles」面板确认元素是否应用了 animation-name，再点开该属性右侧的动画图标，看是否显示「No keyframes found」。

• 确保 @keyframes 定义在使用它的 CSS 规则之前（顺序很重要）
• 若用 CSS-in-JS 或构建工具（如 Webpack），检查 @keyframes 是否被误删或作用域隔离（例如 styled-components 需用 keyframes 辅助函数）
• 动态插入样式时，@keyframes 必须先于带 animation-name 的规则插入到

动画未触发还可能是这些隐藏条件不满足

即使 animation-name 匹配，动画仍可能“不动”——因为 CSS 动画有隐式前提：

• 元素必须有明确的 display（不能是 display: none）
• 动画属性需写全：仅设 animation-name 不够，至少还需 animation-duration（否则默认为 0s）
• 若用 animation-play-state: paused，需手动改为 running 或移除该声明
• 父元素设置了 overflow: hidden 且子元素初始位置在可视区外，可能造成“动了但看不见”

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box {
  animation-name: fadeIn; /* 必须和上面 @keyframes 名称一字不差 */
  animation-duration: 0.3s; /* 缺少这行，动画不会播放 */
  animation-fill-mode: forwards;
}

动画真正生效前，name 匹配只是第一步；漏掉 duration、被 display 阻断、或被构建工具剥离 keyframes，都比拼写错误更难排查。