如何在 CSS 中复用同一组 keyframes 动画规则为多个类名服务-html教程-PHP中文网

如何在 CSS 中复用同一组 keyframes 动画规则为多个类名服务

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 体积，也极大提升可维护性与一致性。