# 動くグラデーション背景のCSSアニメーション実装

> ヒーローセクション向けの、ゆっくり揺らめくグラデーション背景。background-positionだけを動かす軽量な実装です。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/animations/gradient-flow-bg/

## HTML

```html
<div class="hero">
  <strong>Gradient Background</strong>
</div>
```

## CSS

```css
.hero {
  display: grid;
  place-items: center;
  width: 260px;
  height: 150px;
  border-radius: 12px;
  color: #453d31;
  background: linear-gradient(
    120deg,
    #f2d7cb, #efe2c6, #dde5ee, #e3dcec, #f2d7cb
  );
  background-size: 400% 400%;
  animation: drift 10s ease-in-out infinite alternate;
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

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

## 仕組みの解説

グラデーション自体は静止画のまま、background-sizeで4倍に拡大した背景の「見えている窓」をbackground-positionでゆっくり移動させています。widthやfilterを動かさないため描画負荷が小さく、常時動かす背景に向いています。animation-direction: alternateで往復させると、ループの継ぎ目なく揺らぎ続けます。

## 実装のポイント

文字を載せる場合はコントラストが常に確保できる色域に留めるか、文字側に半透明の座布団を敷いてください。

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

- [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)