如何为多个子元素应用相同的背景动画效果？

要让所有子元素共用同步的shimmer动画，核心思路是将动画载体从单个子元素转移到父容器，子元素仅作为显示底色的“窗口”，透过父容器的统一动画实现同步效果。这种方案无需关心子元素的数量、位置变化，是通用且性能更优的实现方式。

实现步骤 #

1. 父容器作为动画载体：通过父容器的伪元素(::before)创建全屏覆盖的渐变动画，确保动画覆盖所有子元素区域。
2. 子元素简化样式：去掉子元素自身的背景渐变和动画，仅保留基础底色，让父容器的动画透过子元素显示。

完整代码示例 #

<div class='parent'>
  <div class='child child-header'>Child 1</div>
  <div class='child child-column'>Child 2</div>
  <div class='child child-column'>Child 3</div>
  <div class='child child-column'>Child 4</div>
</div>

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  justify-content: space-around;
}

/* 父容器伪元素承载统一动画 */
.parent::before {
  content: "";
  position: absolute;
  inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0 */
  background-image: linear-gradient(90deg, transparent, #bdbdbd, transparent);
  animation: skeleton-shimmer 2.5s ease-in-out infinite;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  pointer-events: none; /* 避免干扰子元素交互 */
}

.child {
  display: flex;
  background-color: #d8d8d8;
  position: relative;
}

.child-header {
  width: 100%;
}

.child-column {
  width: 33%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(100% + 200px) 0;
  }
}

方案优势 #

• 通用性强：无论子元素的数量、尺寸、布局如何调整，都能自动适配同步动画。
• 性能更优：仅运行单个动画，相比多个子元素独立动画减少浏览器性能开销。
• 视觉统一：所有子元素的高亮条完全同步移动，避免原方案中动画错位的问题。

注意事项 #

• 父容器必须设置position: relative，确保伪元素相对于父容器定位。
• 伪元素添加pointer-events: none，防止动画层遮挡子元素的点击、输入等交互操作。
• 若子元素需要显示内容，可给子元素添加z-index: 1，确保内容在动画层上方。

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