CSS 如何实现交错动画效果？

Question

CSS 如何实现交错动画效果？

仓乃文 · Accepted Answer

交错动画通过给多个子元素设置不同的 animation-delay，让它们依次出现而非同时出现，产生流畅的序列动画效果。

```css
.stagger-item {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

SASS 循环生成（推荐）：
```scss
@for $i from 1 through 10 {
  .stagger-item:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}
```

补充说明：
- animation-fill-mode: forwards 保持动画结束状态，防止闪回
- 延迟时间通常 0.05s~0.15s 递增，太快没效果太慢拖沓
- 适合列表加载、文字逐字出现、卡片依次入场等场景
- 大量元素时建议用 SASS/LESS 循环生成，避免手写