![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
例えば、このようなグラデーションがあるとします。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
3色のグラデーションですね。
今回は、これをアニメーションで動かす方法を解説します。
グラデーションについては、以下の記事で詳しく解説しています。
-
CSSグラデーションの作り方まとめ【コピペOK!】
続きを見る
CSSでグラデーションをアニメーションさせる方法
まずは冒頭のグラデーションが元になるので、そのコードはこちらです。
<div class="bg"></div>
.bg {
background: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 50%, #2bff88 100%); /* グラデーション */
height: 300px;
width: 100%;
}
色を3色設定して、グラデーションにしています。
そして、これに以下のコードを追記します。
.bg {
animation: bg-gradient 5s linear infinite alternate;
background: linear-gradient(45deg, #fa8bff, #2bd2ff, #2bff88) 0 / 200% 100%;
}
@keyframes bg-gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
コードの意味はこちらです。
animation
- bg-gradient:アニメーション名
- 5s:アニメーションの時間
- linear:等速
- infinite:無限ループ
- alternate:順方向→逆方向の繰り返し
background
- 0 / 200% 100%:グラデーションの開始位置とサイズ
@keyframes
- bg-gradient:アニメーション名
- background-position: 0 0;:アニメーションの最初の状態を背景位置を左上に設定
- background-position: 100% 0;:アニメーションの最後の状態を背景位置を右上に設定
アニメーション名は、animation
と@keyframes
で統一して下さい。
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
ぱっと見では動いているように見えないかも知れませんが、じっくり見れば色が動いているのが分かります。
速さを変える
先ほどは5秒に設定していて、実際にどう動いているか分かりにくかったと思うので、早くしてみるとこのようになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、CSSでグラデーションをアニメーションで動かす方法を解説しました。
ゆっくり動かして、動いているのが分からないくらいの速さにするのがコツかと思います。
また、隣り合う色が違いすぎるとグラデーションっぽくないので、隣同士の色は近いものにするといいでしょう。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)