CSSで背景グラデーション+アニメーションで変化する背景色を実装

Webデザインのトレンドとして、背景やボタンなど各所にグラデーションを採用するというのがあります。
単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。
CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。

ちなみに弊社のHPでも、フッター部分の背景が動くグラデーションになっている仕掛けを採用してます。

それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう！

背景グラデーションをCSSで実装する方法

背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。

background: linear-gradient(#FFB3E7,#FF54C9);

1	background: linear-gradient(#FFB3E7,#FF54C9);

このように、backgroundとlinear-gradient+色の指定をします。グラデーションの方向は、最初に指定した色(上)→最後に指定した色(下)へ変化していきます。

斜めにグラデーションさせる

background: linear-gradient(-45deg,#FFB3E7,#FF54C9);

1	background: linear-gradient(-45deg,#FFB3E7,#FF54C9);

グラデーションの角度を変更するためにはdegを加えて設定してあげます。

animationの基本

ここからは、背景グラデーションをanimetionでアニメーションするようにしていきます。まずはanimationの基本からみていきましょう。

animetionはキーフレームアニメーションを利用してアニメーションさせるときに、まとめて書いて設定することができきるプロパティになっています。

キーフレームアニメーションはアニメーションの変化する要素を指定するもので、animationと@keyframesで共通するanimetion-nameを設定して動作させます。

animationの書き方

animationは、
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction;
このように、それぞれの値を区切って設定します。初期値のままでいいものは省略もできます。

animation-name

アニメーション名の指定をします。これを利用してanimetionとkeyframeを紐付けするので省略はできず任意のアニメーション名を設定する必要があります。

animation-duration

アニメーションが完了するまでの時間を指定します。初期値は0になっています。

animation-timing-function

アニメーションのタイミング・進行速度を設定します。ease、linear、ease-in、ease-out、ease-in-outから選ぶか、cubic-bezier(数値, 数値, 数値, 数値)で設定を自分ですることもできます。初期値はeaseになっています。

animation-delay

アニメーションの始まるまでの時間を設定します。初期値は0になっています。

animation-iteration-count

アニメーションを繰り返す回数を設定します。数値で指定するか、infinite(無限ループ)で指定します。初期値は1になっています。

animation-direction

アニメーションを交互に反転再生するかの設定です。normal,alternate,reverse,alternate-reverseから選択することができます。初期値はnormal

キーフレームアニメーションの書き方

@keyframes + 任意のanimetion-nameでanimetionとの紐付けをしてから、変化させたい要素を0%〜100%で書いていきます。

@keyframe animation-name{
    0%{ background: pink;}
    50%{ background: blue;}
    100%{ background: orange;}
}

@keyframe animation-name{

0%{ background: pink;}

50%{ background: blue;}

100%{ background: orange;}

}

この場合だと、背景色をピンク→青→オレンジという順番で変化させるという設定になります。

グラデーションをアニメーションさせてみよう

ここから本題の背景グラデーション + アニメーションを実際に試していきましょう。

実際のコードはこのようにスタートの色のbackground-colorを設定しておいて、animationと@keyframesでアニメーションをさせます。

body {
  background-color: #6CB8FF;
  animation: gradationTest 5s infinite;
}
 
@keyframes gradationTest {
  0% { background-color: #6CB8FF; }
  50% { background-color: #FFF66C; }
  100% { background-color: #FFA36C; }
}

body {

background-color: #6CB8FF;

animation: gradationTest 5s infinite;

}

@keyframes gradationTest {

0% { background-color: #6CB8FF; }

50% { background-color: #FFF66C; }

100% { background-color: #FFA36C; }

}

先ほどのコードを実装するとこのような動きになります。

斜めのグラデーションをアニメーションさせる

次はグラデーションを斜めにしてアニメーションさせてみましょう。

body{
  background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);
  background-size: 600% 600%;
  animation: AnimationName 10s ease infinite;
}
 
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

body{

background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);

background-size: 600% 600%;

animation: AnimationName 10s ease infinite;

}

@keyframes AnimationName {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

簡単に説明すると、3つの色を45度の角度でグラデーションさせてから、バックグラウンドのサイズを600%とオーバーサイズにすることで画面には1色がアップされて表示されます。
そのアップで表示されたものを、キーフレームアニメーションで背景ポジションを移動させることでグラデーションのアニメとなります。

背景画像にグラデーションアニメを合わせる

これまではグラデーションを16進数で指定していましたが、rgbaで透明度の調整をすることで他の背景画像と合わせて見せることができます。

html

<div class="img"></div>
<div class="gradation"></div>

1 2	<div class="img"></div> <div class="gradation"></div>

htmlで画像を設定する要素と、グラデーションを設定する要素を用意します。

css

.img{
  width: 600px;
  height: 400px;
  background: url(http://weblifetimes.com/wp-content/uploads/2016/08/28_2.jpg) no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 1;
}
.gradation{
  width: 600px;
  height: 400px;
  background: linear-gradient(45deg, rgba(108,184,255,08), rgba(255,246,108,.8), rgba(255,163,108,.8));
  background-size: 600% 600%;
  animation: AnimationName 10s ease infinite;
  position: absolute;
  z-index: 2;
}
 
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.img{

width: 600px;

height: 400px;

background: url(http://weblifetimes.com/wp-content/uploads/2016/08/28_2.jpg) no-repeat;

background-size: cover;

position: absolute;

z-index: 1;

}

.gradation{

width: 600px;

height: 400px;

background: linear-gradient(45deg, rgba(108,184,255,08), rgba(255,246,108,.8), rgba(255,163,108,.8));

background-size: 600% 600%;

animation: AnimationName 10s ease infinite;

position: absolute;

z-index: 2;

}

@keyframes AnimationName {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

画像用のdivに背景画像を設定してグラデーション用のdivにグラデーションとアニメーションを設定します。そして、2つのdivが重なるようにposition: absolute;にします。

グラデーションカラーの透明度を80％にしているので下の画像にグラデーションアニメが重なっているように見えます。

便利ツール

CSS GRADIENT ANIMATOR

CSS GRADIENT ANIMATORではカラーを選択したり、スピードやグラデーションの角度などを設定することで簡単にCSSのコードを生成してくれます！

便利ツール使ってしまえば解決！と思われてしまうかもしれませんが、生成されたコードにどういう意味があるかなど基本的なことが分かっていた方がCSS3の理解力とスキルが増すので１度は最初から自分で書いてみることをオススメします！

DETAIL NOTE