# 3点ドットローダーのCSSアニメーション実装

> 3つのドットが順番に跳ねるローダー。animation-delayをずらすだけで「順番に動く」リズムが生まれます。

- カテゴリ: ローディング
- URL: https://www.css-dictionary.com/animations/spinner-dots/

## HTML

```html
<div class="dots" role="status" aria-label="読み込み中">
  <span></span><span></span><span></span>
</div>
```

## CSS

```css
.dots {
  display: flex;
  gap: 8px;
}

.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c2452f;
  animation: bounce 1s ease-in-out infinite;
}

.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 100% { translate: 0 0; opacity: 0.4; }
  50% { translate: 0 -10px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dots span {
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    50% { opacity: 0.4; }
  }
}
```

## 仕組みの解説

3つのドットは同じアニメーションを共有し、:nth-child()でanimation-delayを0.15秒ずつずらしているだけです。この「同じ動き+時間差」はスタッガー（stagger）と呼ばれ、CSSアニメーションで律動感を出す基本テクニックです。0%と100%を同じ状態にするとループの継ぎ目が見えなくなります。

## 実装のポイント

reduced-motion時は跳ねる動きをやめ、その場で明滅する控えめな表現に差し替えています。

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

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