如何为容器内div子元素按顺序添加延迟动画类（JavaScript/CSS实现）

方案1：纯CSS实现（无需JS） #

你之前的CSS方案失效主要是因为选择器没有覆盖所有元素、且DOM顺序和延迟设置不匹配，直接使用:nth-child()选择器批量设置即可，无需单独给每个颜色类写规则：

/* 所有颜色块统一绑定动画，初始暂停避免提前触发 */
.cc-entry-animation-colour {
  /* 你原有省略的其他样式全部保留 */
  animation: abanico 2s infinite;
  animation-play-state: paused;
}

/* 从上到下按DOM顺序依次设置延迟，共18个元素按顺序写即可 */
.cc-entry-animation-colour:nth-child(1) { animation-delay: 0s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(2) { animation-delay: 1s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(3) { animation-delay: 2s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(4) { animation-delay: 3s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(5) { animation-delay: 4s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(6) { animation-delay: 5s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(7) { animation-delay: 6s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(8) { animation-delay: 7s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(9) { animation-delay: 8s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(10) { animation-delay: 9s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(11) { animation-delay: 10s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(12) { animation-delay: 11s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(13) { animation-delay: 12s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(14) { animation-delay: 13s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(15) { animation-delay: 14s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(16) { animation-delay: 15s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(17) { animation-delay: 16s; animation-play-state: running; }
.cc-entry-animation-colour:nth-child(18) { animation-delay: 17s; animation-play-state: running; }

/* 保留你原有关键帧定义 */
@keyframes abanico {
  from {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-90deg) skew(0deg, 0deg); 
    transform-style: preserve-3d;
  }
  to {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(90deg) skew(0deg, 0deg); 
    transform-style: preserve-3d;
  }
}

方案2：JS动态添加类（更灵活，适配元素数量变化） #

完全匹配你「依次添加动画类」的需求，无需修改原有CSS规则，插入一段JS即可：

CSS部分（保留你原本的定义即可，无需修改） #

.animate-fan{
  animation: abanico 2s infinite;
}

@keyframes abanico {
  from {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-90deg) skew(0deg, 0deg); 
    transform-style: preserve-3d;
  }
  to {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(90deg) skew(0deg, 0deg); 
    transform-style: preserve-3d;
  }
}

JS部分 #

// 按DOM顺序获取所有颜色块
const colourBlocks = document.querySelectorAll('.cc-entry-animation-colour');
// 按索引依次延迟添加动画类，间隔1秒
colourBlocks.forEach((block, index) => {
  setTimeout(() => block.classList.add('animate-fan'), index * 1000);
});

原方案失效原因 #

1. 选择器覆盖不全：你仅给yellow系列的类写了动画规则，前面的green/blue/violet/red/orange系列元素没有绑定动画，所以仅后3个元素能动
2. 顺序不匹配：DOM从上到下的顺序是green-3为第一个元素，你设置的yellow-1无延迟对应最后一个元素，延迟逻辑和预期顺序完全相反
3. 优先级冲突：你省略的其他样式如果存在transform或者animation相关的属性，可能覆盖你写的动画规则导致延迟失效

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