实现CSS顺序Shimmer效果：方块依次闪烁循环需求

我有多个带间距并排排列的方块，希望第一个方块的Shimmer效果结束后，效果依次转移到第二个方块，以此类推；当同一行最后一个方块的效果结束后，整个流程重复。预期效果为方块逐个依次显示 shimmer 扫过动画，循环往复。

现有代码中所有方块会同时播放shimmer动画，不符合逐个触发的需求，以下是修改后的解决方案：

核心思路 #

通过为每个方块的shimmer动画设置递增的延迟时间，让动画按顺序启动；同时调整动画逻辑，确保每个动画结束后恢复初始状态，等待下一轮序列循环。

完整代码实现 #

HTML #

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS #

:root {
  --shimmer-duration: 2.2s; /* 单个方块的shimmer动画时长 */
}

.grid {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 150px);
}

.box {
  height: 150px;
  width: 100%;
  background: #ddd; /* 默认灰色背景 */
  position: relative;
  overflow: hidden;
}

/* 用伪元素实现shimmer扫过效果，便于控制显示时机 */
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 1200px 100%;
  animation: shimmer var(--shimmer-duration) linear forwards infinite;
  opacity: 0; /* 默认隐藏伪元素 */
}

/* 为每个方块设置递增的动画延迟，实现顺序触发 */
.box:nth-child(1)::before { animation-delay: 0s; }
.box:nth-child(2)::before { animation-delay: var(--shimmer-duration); }
.box:nth-child(3)::before { animation-delay: calc(var(--shimmer-duration) * 2); }
.box:nth-child(4)::before { animation-delay: calc(var(--shimmer-duration) * 3); }
.box:nth-child(5)::before { animation-delay: calc(var(--shimmer-duration) * 4); }
.box:nth-child(6)::before { animation-delay: calc(var(--shimmer-duration) * 5); }

@keyframes shimmer {
  0% {
    background-position: -1200px 0;
    opacity: 1; /* 动画开始时显示伪元素 */
  }
  99.9% {
    background-position: 1200px 0;
    opacity: 1; /* 动画过程中保持显示 */
  }
  100% {
    opacity: 0; /* 动画结束后隐藏伪元素 */
    background-position: -1200px 0; /* 重置背景位置，为下一轮循环准备 */
  }
}

关键说明 #

1. 伪元素实现shimmer：将shimmer效果放在伪元素中，不影响方块本身的背景，便于控制显示/隐藏状态。
2. 递增延迟时间：每个方块的动画延迟等于前一个方块的动画时长，确保前一个方块的shimmer结束后，下一个才开始。
3. 循环逻辑：通过animation-iteration-count: infinite让动画无限循环，动画结束时重置背景位置并隐藏伪元素，等待下一轮延迟触发。

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