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，都比拼写错误更难排查。
立即学习“前端免费学习笔记（深入）”；
