@keyframes 不支持逗号分隔多个名称，因语法错误会被浏览器忽略；应共用同一动画名，通过 animation 属性差异化配置参数，或用公共类、css 自定义属性统一管理。
不能用群组选择器合并 @keyframes 规则 —— 这是语法错误，浏览器直接忽略后续内容或报解析失败。
为什么 @keyframes 不支持逗号分隔的多个名称
@keyframes 后只能接一个合法标识符（如 slide、fade-in），不是选择器。写成 @keyframes anim_a, anim_b { ... } 是无效 CSS，连带整个规则块都会被丢弃。
- 浏览器解析时会停在第一个逗号处，后面部分不进入样式表
- DevTools 的 Styles 面板里根本看不到这个规则，也不会报明显错误（只在 Console 里可能有 warning）
- 即使你写了多个
@keyframes块同名，后者也会覆盖前者（不是合并）
真正能复用动画逻辑的方式：共用一个 keyframes 名称
把动画行为抽成通用逻辑，让多个类都引用同一个 @keyframes 名称，再通过各自的选择器控制差异化参数。
- 定义一次：
@keyframes bounce { 0% { transform: scaleY(1); } 50% { transform: scaleY(1.3); } 100% { transform: scaleY(1); } } - 多个类分别调用：
.box-1 { animation: bounce 0.6s ease-in-out; }、.box-2 { animation: bounce 0.8s ease-out 0.1s; } - 关键帧本身不关心谁在用它；所有差异（延迟、方向、次数、时长）都在
animation属性里配
多个类想共享动画+相同参数？用 CSS 类组合或自定义属性
如果多个元素不仅动画逻辑一样，连 animation-duration、animation-timing-function 等也完全一致，就别在每个类里重复写 —— 提取公共声明。
- 用基础类统一动画配置：
.anim-bounce { animation: bounce 0.6s ease-in-out; }，再和业务类组合：<div class="card anim-bounce"> <li>用 CSS 自定义属性管理时序参数：<code>:root { --anim-duration: 0.6s; --anim-easing: ease-in-out; }，然后.anim-bounce { animation: bounce var(--anim-duration) var(--anim-easing); } - 避免用
!important覆盖动画属性 —— 它会让animation简写失效，导致部分子属性回退到初始值
真正容易被忽略的是：动画是否“看起来一样”，取决于关键帧内部是否修改了同一组属性。比如两个类都用了 transform 和 opacity，但其中一个还额外加了 animation-fill-mode: forwards，那结束状态就不同 —— 这种细节比命名方式更影响最终效果。
