animation-name必须与@keyframes名称完全一致（含大小写、连字符等），否则动画不触发；@keyframes不可嵌套，须独立声明；多个动画需逗号分隔且各属性顺序严格对应。
animation-name 必须和 @keyframes 名称完全一致
这是最常出错的地方：animation-name 的值不是随便起的，它必须一字不差地匹配你用 @keyframes 定义的动画名称，包括大小写、空格、连字符。浏览器不会报错，但动画就是不触发——因为找不到对应的关键帧规则。
常见错误现象：
-
animation-name: slideIn;但定义的是@keyframes slidein { ... }（大小写不一致） -
animation-name: fade-in;但定义的是@keyframes fade_in { ... }（连字符 vs 下划线） -
animation-name: bounce;但关键帧写成了@keyframes bounce-animation { ... }（名称不匹配）
@keyframes 必须在 CSS 中声明，且不能嵌套
@keyframes 是独立的 CSS 规则，不能写在选择器内部，也不能被其他规则包裹。如果把它放在 .card { ... } 里，或者用 SCSS 的嵌套语法包起来，浏览器直接忽略整个关键帧定义，animation-name 就永远找不到目标。
正确写法示例：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
animation-name: fadeIn;
animation-duration: 0.3s;
}
错误写法包括：
-
.card { @keyframes fadeIn { ... } }（非法嵌套） - 把
@keyframes写在<style></style>标签外，或 JS 字符串里未注入到样式表中
animation-name 值为 none 时会禁用动画，但不重置状态
animation-name: none 的作用是“停止当前动画并清空动画队列”，但它不会把元素拉回初始样式。比如一个正在执行 translateX(200px) 的元素，设成 none 后，它就停在 200px 处，不会自动归位。
需要归位？得手动设置样式：
- 显式重置：比如加
transform: translateX(0); - 用
animation-fill-mode: forwards配合animation-play-state: paused控制暂停点 - 避免依赖
none来“撤销”动画效果，它只是切断动画链，不是回滚
多个动画用逗号分隔，顺序和 animation-duration 等需严格对齐
当同时应用多个动画时，animation-name 支持逗号分隔，但所有其他 animation-* 属性（如 animation-duration、animation-timing-function）也必须用相同顺序、相同数量的逗号分隔，否则会按顺序循环复用，极易错配。
例如：
.btn {
animation-name: pulse, shake;
animation-duration: 2s, 0.5s;
animation-iteration-count: infinite, 3;
}
如果漏掉某个属性的第二项，比如只写 animation-duration: 2s;，那第二个动画 shake 就会继承 2s，而不是你想要的 0.5s。
容易被忽略的点：
- 浏览器不会警告参数错位，只会静默按规则填充
- 调试时建议把多动画拆成单个类分别测试，确认每个都独立生效后再合并
- 使用 CSS 自定义属性传参时，
animation-name无法被 var() 替换（它不接受 CSS 变量值）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
