不修改HTML实现相同类名bar的两个div不同往复动画的CSS问题

解决方案 #

无需修改现有HTML结构，仅需要调整CSS如下：

.bar {
  width: 200px;
  height: 60px;
  background-color: #444444;
  /* 实现单个矩形水平居中 */
  margin: 0 auto;
  animation-duration: 3s;
  animation-name: bar; 
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 第一个矩形设置底部间距60px，满足两个矩形的间距要求 */
.bar:first-child {
  margin-bottom: 60px;
}

/* 第二个矩形使用反向动画，实现和第一个矩形运动方向相反的效果 */
.bar:last-child {
  animation-direction: reverse;
}

@keyframes bar {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-200px);
  }
}

/* 兼容Webkit内核浏览器可选添加 */
@-webkit-keyframes bar {
  0%, 100% {
    -webkit-transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-200px);
  }
}

改动说明 #

• 基础布局：通过margin: 0 auto让两个矩形默认水平居中，配合:first-child设置下间距，直接组成符合要求的等号形状。
• 动画逻辑：重写了关键帧规则，0%和100%为初始居中位置，50%为向左偏移200px的位置，单次3秒周期刚好完成一次往复振荡。
• 反向运动：给第二个矩形设置animation-direction: reverse，共用同一套关键帧即可实现第一个左移时第二个右移的反向效果，无需额外定义第二套关键帧。

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