# 流れるグラデーションテキストのCSSアニメーション実装

> 文字の中をグラデーションが流れ続けるヒーロー見出し向けの演出。background-clip: textが主役です。

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

## HTML

```html
<h1 class="flow-text">Gradient Flow</h1>
```

## CSS

```css
.flow-text {
  font-size: 40px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(
    90deg,
    #c2452f, #a98338, #3c5c88, #c2452f
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
}

@keyframes flow {
  to { background-position: 300% 0; }
}

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

## 仕組みの解説

background-clip: textで背景を文字の形に切り抜き、color: transparentで文字自体を透明にすると「グラデーションでできた文字」になります。あとはスケルトンと同じ要領でbackground-positionを流すだけです。グラデーションの最初と最後を同じ色（ここでは朱色）にしておくと、ループの継ぎ目が見えません。

## 実装のポイント

background-clip: textは-webkit-プレフィックス付きの記述も併記するのが現在も安全です（実装の歴史的経緯によるもの）。

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

- [linear-gradient](https://www.css-dictionary.com/property/linear-gradient.md)
- [background-size](https://www.css-dictionary.com/property/background-size.md)
- [background-position](https://www.css-dictionary.com/property/background-position.md)
- [animation](https://www.css-dictionary.com/property/animation.md)
- [color](https://www.css-dictionary.com/property/color.md)