# 波打つテキストのCSSアニメーション実装

> 1文字ずつ上下に波打つ楽しげなテキスト演出。文字をspanに分けてanimation-delayをずらすスタッガーの応用です。

- カテゴリ: テキスト
- URL: https://www.css-dictionary.com/animations/text-wave/

## HTML

```html
<p class="wave" aria-label="CSS!">
  <span>C</span><span>S</span><span>S</span><span>!</span>
</p>
```

## CSS

```css
.wave {
  font-size: 36px;
  font-weight: 700;
  color: #3c5c88;
  display: flex;
  gap: 2px;
}

.wave span {
  display: inline-block;
  animation: rise 1.4s ease-in-out infinite;
}

.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }

@keyframes rise {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 -12px; }
}

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

## 仕組みの解説

文字を1つずつspanで包み、同じ上下アニメーションに0.1秒ずつのdelayを与えると波に見えます。キーフレームの山を30%に置いている（50%ではなく）のは、上がる動きを素早く・戻りをゆっくりにして弾む感じを出すためです。親のaria-labelに全文を持たせ、分割したspanが1文字ずつ読み上げられるのを防いでいます。

## 実装のポイント

文字分割はアクセシビリティと引き換えです。装飾的な短い単語だけに使い、本文には使わないでください。

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

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