动画失效主因是animation-name与@keyframes名称大小写/空格/符号不完全匹配，且animation-duration在简写中不可省略；关键帧仅支持from/to或百分比，不支持px/s等单位。
animation-name 必须严格匹配 @keyframes 名称
这是最常见的失效原因：大小写、空格、特殊字符不一致会导致动画完全不触发。浏览器对名称匹配是精确比对，不忽略任何字符差异。
-
animation-name值必须与@keyframes后的标识符完全一致（包括连字符、下划线、大小写） - 例如
@keyframes slideIn对应animation-name: slideIn，不能写成slidein或"slideIn" - 如果
@keyframes定义在外部 css 文件中，需确认该文件已正确加载且无 404
@keyframes 内部必须用百分比或 from/to，不能混用单位
CSS 动画关键帧只接受 from/to 或 0%/100% 及中间百分比值，不支持像素、rem 等绝对/相对单位作为时间点。
- ✅ 正确：
from、to、0%、50%、100% - ❌ 错误：
0px、1s、first、end - 遗漏
0%或100%会导致起始/结束状态不可控，建议显式写出
@keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }animation 属性简写时，animation-duration 是必填项
使用 animation 简写时，只要缺了 animation-duration（哪怕只写 1ms），整个动画就会静默失效——既不报错，也不执行。
- 简写顺序固定：
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; - 前两个值（
name和duration）不可省略；其余可省略，会取默认值 - 常见误写：
animation: slideIn ease-in;→ 缺duration，动画不播放 - 安全写法：
animation: slideIn 0.3s ease-in;
动画不触发时优先检查 animation-fill-mode 和 display
即使定义和语法都正确，动画仍可能“看不见”：要么没开始，要么一播完就回退，要么被父容器裁剪或隐藏。
立即学习“前端免费学习笔记（深入）”；
-
animation-fill-mode: none（默认）→ 动画结束后元素恢复初始样式；如需保持末帧，设为forwards -
display: none会彻底中断动画（包括正在播放的），改用visibility: hidden或opacity: 0 - 父元素设置
overflow: hidden且动画涉及位移/缩放时，可能意外裁剪动画过程 - 用 DevTools 的 Animations 面板（chrome/firefox）直接查看动画是否被注册、是否在运行、当前时间轴位置
实际调试时，最常被忽略的是 animation-duration 缺失和 @keyframes 名称大小写不一致——这两个问题不会抛任何错误，但动画就是不动。