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，都比拼写错误更难排查。

# css  # js  # 浏览器  # 工具  # 作用域  # 报错提示  # overflow  # webpack 

相关文章： css :nth child 选择器怎么用_列表样式控制示例  c++如何实现线程安全的队列 c++无锁队列设计【进阶】  千库网官网入口推荐 千库网设计创意平台入口  百度浏览器如何禁止弹窗 百度浏览器弹窗拦截设置  如何在嵌套树形结构中递归查找指定 slug 的节点及其子树  Linux网络故障排查流程_常见问题定位思路总结【技巧】  光遇办公室圣诞节物品在哪兑换-光遇办公室圣诞节物品兑换方法  composer如何配置本地path仓库进行包开发_composer本地路径依赖映射【技巧】  php8.4如何操作redis缓存_php8.4redis扩展安装与使用【教程】  如何在Linux中搭建Golang开发环境_Linux Golang安装配置指南  Python数据仓库与ETL构建实战_Airflow调度流程详解  PythonRESTful API项目教程_FastAPIFlask完整流程解析  如何为不同团队 ID 动态生成多个非值班状态按钮  悟空浏览器小说入口_全网热门网文免费阅读  顺丰快件查询官网入口 输入单号即刻获取物流信息  如何在 HTML 表单输入框上叠加绘制 Canvas 对角线  如何使用Golang实现应用状态监控_分析CPU和内存使用  VSCode for Assembly：汇编语言学习与调试  Composer下载速度慢怎么办？如何配置阿里云/腾讯云国内镜像源？  最后的中高端LCD手机？机身重255g 电池5000mAh  以“洁净”温暖童年，用“科技”照亮未来——海信洗衣机爱心进驻九江太阳村  Python迭代器与生成器教程_高效遍历与延迟加载实战  PythonHTTP请求生命周期_请求响应解析【教程】  OPPO Find N5 折叠屏铰链技术升级：更浅折痕与悬停新玩法  html5表单minmax属性怎么用_数字日期输入范围限制方法【汇总】  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  Python字符串格式化怎么用_fstring与format全面解析【教程】  键盘按键错乱怎么办 电脑键盘输入修复方法【教程】  VSCode的“Go to Symbol”：在文件中快速导航  Python面向对象测试方法_mock解析【教程】 

相关栏目： 【 行业资讯17850 】 【 软件资源51899 】 【 网站技术89748 】 【 百度推广44206 】 【 网络营销84187 】 【 运营推广93002 】 【 AI优化91086 】 【 网络优化117696 】 【 网址导航107142 】