animation-name 是合法 css 属性，animation-name\_ 因非标准而被浏览器忽略；需搭配 @keyframes、animation-duration 等且名称严格匹配才能生效。
animation-name 不是合法的 CSS 属性名，正确写法是 animation-name（无下划线）。
为什么浏览器完全忽略你的 animation-name_ 设置
CSS 属性名严格区分拼写和符号，animation-name_ 是一个自定义的、未被任何规范定义的属性。浏览器遇到不认识的属性会直接丢弃，不报错也不生效——你查 computed style 时甚至看不到它。
- 所有标准 CSS 动画相关属性都不带下划线：
animation-name、animation-duration、animation-timing-function等 - 下划线在 CSS 中不具特殊含义，仅作普通字符；
animation-name_和foo-bar_baz一样，只是无效标识符 - 某些 IDE 或 CSS 预处理器（如 Sass）可能允许变量或自定义语法含下划线，但最终生成到 CSS 文件里仍必须符合标准属性名
怎么确认 animation-name 真正生效了
光写对属性名还不够，animation-name 必须搭配 @keyframes 定义和至少一个其他动画控制属性（如 animation-duration），否则动画不会触发。
-
animation-name值必须与@keyframes后的名称**完全一致**（区分大小写） - 必须设置
animation-duration（哪怕为0.01s），否则动画时长为0s，视觉上等于没动 - 检查元素是否被其他规则覆盖：用浏览器 DevTools 的 Styles 面板看
animation-name是否显示为“已计算”且非none
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.box {
animation-name: slideIn;
animation-duration: 0.3s;
}
常见连带错误：命名冲突与作用域问题
animation-name 是全局匹配的，不同组件或库如果用了同名 @keyframes，后定义的会覆盖先定义的——这在微前端或第三方 UI 库混用时特别容易出问题。
立即学习“前端免费学习笔记（深入）”；
- 避免用通用名如
fade、show，改用带前缀的名称：myapp-fade-in - CSS Modules 或 Shadow DOM 可隔离样式，但
@keyframes本身不被模块化，仍需靠命名规避冲突 - 构建工具（如 PostCSS 插件）一般不重命名
@keyframes，手动加哈希或作用域前缀更可靠
最常被忽略的是：即使 animation-name 拼写正确、@keyframes 存在、时长不为零，如果元素初始状态和 from 关键帧完全一致，动画也可能“看起来没发生”——得看实际变化是否触发了渲染重排。
