CSS 的 @keyframes 规则本身不支持为多个动画名称批量定义；但可通过共用同一个动画名称，再分别在不同选择器中设置 animation-name 及差异化属性（如 animation-delay、animation-direction 等）来高效复用动画逻辑，避免重复代码。
css 的 `@keyframes` 规则本身不支持为多个动画名称批量定义；但可通过**共用同一个动画名称**，再分别在不同选择器中设置 `animation-name` 及差异化属性（如 `animation-delay`、`animation-direction` 等）来高效复用动画逻辑，避免重复代码。
在 CSS 动画开发中，一个常见误区是试图像选择器一样用逗号或空格为 @keyframes 声明多个名称（例如 @keyframes anim_3, anim_4 { ... }）。这是无效语法——@keyframes 后只能跟唯一、合法的标识符（即单个动画名称），浏览器会直接忽略后续内容或报解析错误。
✅ 正确做法是：定义一个通用的 @keyframes 名称（如 anim），然后让多个类（.anim_3、.anim_4）都引用它，再通过各自的 CSS 声明控制差异化行为（延迟、方向、持续时间等）。这样既保持动画逻辑统一，又实现样式与行为解耦。
以下为优化后的完整示例：
/* 公共基础样式 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-duration: 4s; /* 注意：单位不可省略 */
animation-iteration-count: infinite;
}
/* 共享定位属性 */
.anim_3,
.anim_4 {
position: relative;
}
/* 第三个元素：使用 anim 动画，延迟 1 秒开始 */
.anim_3 {
animation-name: anim;
animation-delay: 1s;
animation-duration: 1s; /* 覆盖全局 duration，确保节奏可控 */
}
/* 第四个元素：同样使用 anim 动画，但反向播放、延迟 2 秒 */
.anim_4 {
animation-name: anim;
animation-delay: 2s;
animation-direction: reverse;
animation-duration: 1s;
}
/* ✅ 单一、可复用的 keyframes 定义 */
@keyframes anim {
0% {
background-color: red;
left: 0;
top: 0;
}
25% {
background-color: yellow;
left: 200px;
top: 0;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0;
top: 200px;
}
100% {
background-color: red;
left: 0;
top: 0;
}
}? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- animation-duration、animation-delay 等动画控制属性必须带单位（如 1s、200ms），否则无效；
- @keyframes 名称区分大小写，引用时需完全一致；
- 若需更灵活的复用（如主题色、位移量变化），可结合 CSS 自定义属性（--offset-x, --primary-color）+ calc() 实现动态效果（需在 @keyframes 内使用 var()，注意兼容性）；
- 不建议依赖 animation-play-state 或 JS 控制多个实例的同步性——若需强同步，应使用单个容器 + 多子元素统一动画。
通过这种“一套动画逻辑，多处按需调用”的方式，不仅显著减少 CSS 体积，也极大提升可维护性与一致性。
