CSSで背景グラデーション+アニメーションで変化する背景色を実装してみよう!

2016/08/23

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

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

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

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

 

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

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

See the Pen gradietion1 by madka (@madka) on CodePen.0


 

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

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

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

See the Pen gradietion2 by madka (@madka) on CodePen.

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;}
}

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

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

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

body {
  background-color: #6CB8FF;
  animation: gradationTest 5s infinite;
}

@keyframes gradationTest {
  0% { background-color: #6CB8FF; }
  50% { background-color: #FFF66C; }
  100% { background-color: #FFA36C; }
}

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

See the Pen gradation3 by madka (@madka) on CodePen.0


先ほどのコードを実装するとこのような動きになります。もしも何も変化がないという方は右下の[RERUN]をクリックしてみてください。

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

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

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色がアップされて表示されます。
そのアップで表示されたものを、キーフレームアニメーションで背景ポジションを移動させることでグラデーションのアニメとなります。
 

See the Pen gradation4 by madka (@madka) on CodePen.0


先ほどのコードを実際に動かすとこのような動きになります。何も変化がないという方は右下の[RERUN]をクリックしてみてください。

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

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

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

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

.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;にします。
 

See the Pen gradation5 by madka (@madka) on CodePen.0


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

便利ツール

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

最初から丁寧に見ていただいた方には、「なんだ!最後の便利ツール使っちゃえば解決じゃん!」なんて思われてしまうかもしれませんが、生成されたコードにどういう意味があるかなど基本的なことが分かっていた方がCSS3の理解力とスキルが増すので面倒くさがらずに、1度は最初から自分で書いてみることをオススメします!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend