为同一类的不同元素应用相同CSS动画的技术实现方法

这其实很简单，核心思路就是把重复的动画逻辑抽成一个通用动画，然后批量应用到目标元素上。我给你两种常用的实现方式：

方法一：使用逗号分隔选择器直接批量应用 #

如果你不想修改HTML结构，直接在CSS里同时选中多个目标类，给它们绑定同一个动画即可：

原代码（问题中的情况） #

/* 重复定义的两个相似动画 */
@keyframes anim-1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.item-1 {
  animation: anim-1 1s infinite;
}

@keyframes anim-2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.item-2 {
  animation: anim-2 1s infinite;
}

修改后的代码 #

/* 只定义一个通用动画 */
@keyframes common-anim {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

/* 用逗号分隔多个选择器，统一应用动画 */
.item-1, .item-2 {
  animation: common-anim 1s infinite;
}

方法二：添加统一的通用类（更易维护） #

如果后续可能有更多元素需要这个动画，给所有目标元素添加一个通用类（比如animated-item）会更灵活：

修改后的HTML #

<div class="item-1 animated-item">元素1</div>
<div class="item-2 animated-item">元素2</div>

修改后的CSS #

@keyframes common-anim {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

/* 给通用类绑定动画 */
.animated-item {
  animation: common-anim 1s infinite;
}

/* 如果需要给单个元素设置差异化属性，单独写即可 */
.item-1 {
  animation-delay: 0.2s; /* 元素1延迟0.2秒开始动画 */
}
.item-2 {
  animation-duration: 1.5s; /* 元素2的动画时长为1.5秒 */
}

这两种方法都能让不同类的元素共用同一个动画效果，第二种方式在元素数量较多时更便于维护——后续新增元素只要加上animated-item类就能自动拥有动画，不需要修改CSS选择器。

内容的提问来源于stack exchange，提问作者Phaneeth