CSSだけで作る！動く背景グラデーションの実装方法｜linear-gradient＋アニメーション
スポンサーリンクこんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトの背景に、静止したグラデーションではなく、ゆるやかに動くアニメーションをつけたいと思ったことはありませんか？
JavaScriptや外部ライブラリを使わず、CSSだけで実現できる方法があるんです！
今回は、linear-gradient・background-size・@keyframesを活用した動く背景表現を、シンプルな例から応用例までわかりやすく紹介します。
実装が簡単なのに、サイト全体の印象がぐっと変わるテクニックなので、ポートフォリオやランディングページの背景演出にもおすすめです。
基本：CSSでグラデーション背景を動かす仕組みポイントは、背景画像を大きめに設定し、background-positionをアニメーションで移動させること。
まずは最小構成のサンプルです。
See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen.
グラデーション色を複数指定しておくと、滑らかに変化しているように見えるのがポイントです。
応用：角度を変える＆速度を調整する背景グラデーションは linear-gradient() の角度を変更すれば、斜めや縦方向に動く演出も簡単に作れます。
See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen.
animation-duration（上記では10秒）を短くすれば速く、長くすればゆっくり動く背景に。
応用：hover時だけ動かす常時動かさず、マウスホバー時にだけ動く演出も可能です。
See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen.
ユーザーが操作したときだけ動くため、動きすぎないUIを目指したいときに最適です。
パフォーマンス注意点CSSアニメーションは比較的軽量ですが、背景サイズを大きくしすぎるとパフォーマンスに影響します。
背景サイズは2〜8倍程度を目安に調整し、必要なら will-change: background-position; を指定してパフォーマンス改善すると良いです。
まとめ
CSSだけで動く背景グラデーションを作るコツ ・linear-gradientとbackground-positionを組み合わせる ・@keyframesで位置をスライドさせることで動きを演出 ・角度・速度・hover制御で応用パターンを増やせる ・背景サイズは大きめに設定しつつパフォーマンスに注意
satokotadesignキャンペーン実施中！
静岡県浜松市でホームページ制作ならsatokotadesign
スポンサーリンク Facebook postはてブPocketFeedly この記事を書いた人