# 順次フェードイン（スタッガー）のCSSアニメーション実装

> リスト項目が下から順番にふわっと現れる入場アニメーション。animation-delayの時間差で「流れ」を作ります。

- カテゴリ: 出現・入場
- URL: https://www.css-dictionary.com/animations/fade-up-stagger/

## HTML

```html
<ul class="stagger">
  <li>ひとつめの項目</li>
  <li>ふたつめの項目</li>
  <li>みっつめの項目</li>
  <li>よっつめの項目</li>
</ul>
```

## CSS

```css
.stagger {
  list-style: none;
  padding: 0;
  width: 240px;
}

.stagger li {
  padding: 12px 16px;
  margin-block: 8px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  animation: fade-up 0.5s ease-out both;
}

.stagger li:nth-child(1) { animation-delay: 0.05s; }
.stagger li:nth-child(2) { animation-delay: 0.15s; }
.stagger li:nth-child(3) { animation-delay: 0.25s; }
.stagger li:nth-child(4) { animation-delay: 0.35s; }

@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stagger li { animation: none; }
}
```

## 仕組みの解説

ポイントはanimation-fill-mode: both（ショートハンド内のboth）です。これがないとdelay中はアニメ開始前の状態（=表示済み）になり、「一瞬見えてから消えて現れる」チラつきが起きます。@keyframesはfromだけ書けばtoは現在のスタイルが使われるため、終了状態を二重管理せずに済みます。

## 実装のポイント

項目数が可変の場合、nth-childの列挙の代わりにインラインstyleでanimation-delay: calc(var(--i) * 0.1s)を渡す設計がよく使われます。

## 使っているプロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [pseudo-nth-child](https://www.css-dictionary.com/property/pseudo-nth-child.md)