はじめに
「Webサイトの背景を動かしたいけれど、CSSだけで作れるの？」
「背景アニメーションを入れたいけれど、どのCSSを使えばいいの？」と迷っていませんか。
Webサイトのトップページを作っていて、背景に色や図形をゆっくり動かしたいと思っても、アニメーションの設定方法が分からず、コードを書くところで迷ってしまうことがあります。
この記事では、CSSで背景を動かす基本的な仕組みから、実際に使える設定方法、動きを調整するときのポイントまで分かります。
Webサイトの背景アニメーションを作る方法
Webサイトの背景を動かしたいけれど、「画像やJavaScriptを使わないと作れないの？」「CSSだけでどのように動きを付けるの？」と迷うことがあります。
ここでは、CSSで背景を動かす基本的な方法と、アニメーションが動く仕組みを順に説明します。
背景アニメーションはCSSで作れる
背景アニメーションは、CSSのanimationプロパティと@keyframesを使って作れます。
@keyframesで動きの変化を指定し、animationで時間や繰り返しを設定することで、背景の位置や色、透明度などを滑らかに変化させられます。
JavaScriptを使わず、CSSだけで手軽に動きを付けられるのも特徴です。
背景アニメーションの基本的な仕組み
背景アニメーションは、CSSで指定した開始時と終了時の状態を、設定した時間に合わせて変化させる仕組みです。
たとえば、背景の位置を0%から100%へ変化させれば、指定した時間をかけて背景が移動するように見せられます。
繰り返しや往復なども設定できるため、表現に合わせて動き方を調整できます。
背景アニメーションの基本的な作り方
背景アニメーションを実装するときは、まずHTMLで背景を表示する要素を用意し、CSSで背景の色や画像などを設定します。
ここでは、背景の設定から動きの指定、Webサイト上で実際に表示するまでの流れを順に説明します。
HTMLとCSSで背景を設定する
まずは背景アニメーションを表示する要素をHTMLで用意し、CSSで背景色や背景画像を設定します。
background-colorやbackground-imageを使って背景の初期状態を整えておくと、次の@keyframesで動きを付けられるようになります。
@keyframesで動きを設定する
@keyframesでは、アニメーションの開始時と終了時の状態を指定します。
たとえば、背景位置を0%から100%へ変化させると、指定した時間に合わせて背景が移動するように見せられます。
背景色を変えたい場合も、開始時と終了時にそれぞれ異なる色を指定すれば設定できます。
動く背景をWebサイトに表示する
作成した@keyframesをanimationプロパティで対象の要素に指定すると、Webサイト上で背景が動き始めます。
たとえば「animation: backgroundMove 5s linear infinite」と設定すれば、backgroundMoveの動きを5秒間隔で繰り返せます。
ページを表示して、背景が意図した動きになっているか確認してみましょう。
CSSで作れる背景アニメーションの作り方
CSSを使った背景アニメーションには、背景色の変化だけでなく、グラデーションや図形、波やライン、粒子などを動かす方法があります。
ここでは、代表的な4種類の背景アニメーションについて、それぞれの作り方を順に説明します。
グラデーションを動かす背景アニメーション
グラデーションの背景は、複数の色を指定し、@keyframesでbackground-positionを変化させることで動かせます。
たとえば、背景位置を0%から100%へ移動させると、グラデーションが横方向へ流れるように見せられます。
infiniteを指定すれば、同じ動きを繰り返すことも可能です。
図形を動かす背景アニメーション
円や四角形などの図形は、CSSで形を作り、transformを使って位置や角度を変えることで動かせます。
たとえば、円形の要素をtranslate()で移動させれば、画面上をゆっくり漂うような背景を作れます。
@keyframesで移動前と移動後の位置を指定すると、動き方も調整できます。
波やラインを動かす背景アニメーション
波やラインは、CSSの疑似要素などを使って形を作り、transformやbackground-positionを変化させることで動かせます。
横長のラインをtranslateX()で左右へ移動させれば、画面を流れるような表現も可能です。
波の場合も、位置やサイズを変化させることで動きのある背景を作れます。
粒子を動かす背景アニメーション
粒子の背景は、小さな円形の要素を複数配置し、位置や透明度を変化させることで作れます。
translateY()で上下に移動させながらopacityを変えると、粒子がふわっと浮かぶような表現になります。
粒子ごとに位置や動く時間を変えると、より自然な動きを付けられます。
背景アニメーションを実装するときの注意点
背景アニメーションは、動きを加えることでWebサイトの印象を変えられる一方、設定によっては文字やコンテンツが見づらくなったり、操作の邪魔になったりすることがあります。
ここでは、背景アニメーションを実装するときに確認したい3つの注意点を順に説明します。
文字やコンテンツが見づらくならないようにする
背景アニメーションの色や明るさによっては、文字とのコントラストが弱くなり、内容が読みづらくなることがあります。
必要に応じて半透明のレイヤーを重ねるなど、文字が背景に埋もれないように調整しましょう。
実装後は背景が変化しても、文字を無理なく読めるか確認することが大切です。
動きを速くしすぎず操作の邪魔をしない
背景の動きが速すぎると視線が引っ張られ、文字を読んだりボタンを操作したりしにくくなることがあります。
animation-durationを長めに設定するなど、背景はゆっくりと変化させると自然です。
動く要素がボタンやリンクへのクリックやタップを妨げていないかも確認しましょう。
ページの表示速度に影響しないようにする
大きな画像を使ったり、多くの要素を同時に動かしたりすると、ページの表示や操作が重くなることがあります。
背景画像のサイズや動かす要素の数を必要な範囲に抑え、負荷を増やしすぎないようにしましょう。
実装後はパソコンとスマートフォンの両方で確認すると安心です。
背景アニメーションを入れたあとに表示が重く感じる場合は、Webサイトの表示速度を測定し、どの処理が負荷になっているのか確認してみましょう。
▶Webサイトの表示速度を測定する方法｜遅い原因の調べ方も解説
まとめ
Webサイトの背景アニメーションは、CSSのanimationと@keyframesを使えば、JavaScriptを使わなくても手軽に取り入れられます。
グラデーションや図形、粒子などさまざまな表現ができますが、背景の動きを目立たせすぎると、文字の読みやすさや操作性に影響することもあります。
まずはシンプルでゆっくりとした動きから試し、パソコンとスマートフォンで見え方を確認しながら、Webサイトの雰囲気に合った背景アニメーションに整えてみてください。
