CSSで背景にグラデーションをかけてアニメーションさせる方法

今回は背景にCSSでグラデーションをかけてアニメーションさせる方法を紹介します。

グラデーションを使うとかなり目を引くことができるので、強い印象を与えたい場所に使うと有効ですね。アニメーションも合わせればさらに目を引くスタイルになります。

 

背景にグラデーションをかける方法

CSSで背景にグラデーションをかけるにはbackground: linear-gradientを指定します。

background: linear-gradient(red, yellow);

 

このように書くとredからyellowにだんだんグラデーションがかかります。グラデーションの向きはデフォルトでは上から下となっています。

 

角度を変更したい場合はdegを加えましょう。指定した角度に向かってグラデーションの方向を決めることができます。

background: linear-gradient(-45deg, red, yellow);

 

デフォルトでは上から下なので、0度が中央上となっています。

そこから-45度の場所が起点になるので、この場合は左上から右下に向かってグラデーションがかかります。

 

animationを指定する

次は背景のグラデーションをアニメーションで動かしてみます。

animationプロパティは@keyframesと一緒に使うことでアニメーションが作れます。

animationはいくつか指定する値があるので、順番に解説します。

 

animation-name

その名の通りアニメーションの名前です。

アニメーションの名前と動きは@keyframesで指定し、animation-nameには@keyframesで作ったアニメーションと同じ名前にすることで紐づけることができます。

アニメーションの名前は自分の好きなように決めることができます。

 

animation-duration

アニメーションの継続時間です。何秒かけてアニメーションするかを指定します。

 

animation-timing-function

アニメーションのイージングを指定します。

イージングにはease、linear、ease-in、ease-out、ease-in-outの中から指定するか、cubic-bezier()でより複雑なイージングを指定することもできます。

cubic-bezireを使うのは結構難しいので、上の5つから選ぶのがいいと思います。

 

animation-delay

アニメーションが開始するまでの時間を指定します。指定した秒数だけアニメーションが遅れてスタートします。

2つのアニメーションのタイミングをずらしたい時などに使えるでしょう。

 

animation-iteration-count

アニメーションを繰り返す回数を指定します。

数値で何回繰り返すか指定できる他、infinateで無限ループにすることもできます。初期値は1です。

 

animation-direction

アニメーションを交互に反転させて再生するかの指定です。normal、alternate、reverse、alternate-reverseから指定できます。

基本的にnormalで大丈夫でしょう。初期値もnormalとなっています。

 

@keyframesの書き方

@keyframesでは実際のアニメーションの動作を指定していきます。

@keyframesの後には任意のアニメーションの名前、{ }の中にはアニメーション処理を記述します。

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

 

この場合、背景色がピンク→青→オレンジという順番で変化していきます。

 

グラデーションとアニメーションを合わせる

linear-gradientとanimationについて理解したところで、グラデーションとアニメーションを合わせる方法を解説します。

例えば以下のコードです。

body {
background-color: red;
animation: gradationTest 5s infinite;
}
 
@keyframes gradationTest {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: yellow; }
}

 

animationと@keyframesを合わせて背景色をアニメーションさせています。

自然に色が移り変わっていくのでグラデーションがかかったように見えます。

 

斜めのグラデーションをかける

linear-gradientでグラデーションの向きを斜めにしてアニメーションさせてみます。

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色だけが表示さている状態になります。

その状態からanimationでbackground-positionを変更し、グラデーションさせているように見えています。

実際は色が移り変わっているのではなく、背景が動いているのでグラデーションしているように見えるという言い方が正しいかもしれません。

 

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

これまではグラデーションの色を16進数で指定してきましたが、色はrgbaでも指定可能です。

rgbaで色を少し透過させることで、背景画像に半透明のグラデーションのアニメーションを乗せることができます。

HTML

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

CSS

 

.img{
width: 600px;
height: 400px;
background: url(sample.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>でからの要素を作り、そこにはbackgroundで背景画像を表示します。

position: absoluteで2つの要素を重ねて、グラデーションの要素はrgbaで少し透過させましょう。

この状態でグラデーションにアニメーションをかけると、背景画像の上でグラデーションのアニメーションができるようになります。

 

また、「グラデーションを簡単に作りたい!」という人は探すとCSSのグラデーション作成ツールがいくつか見つかると思うので、探してみてください。

便利ツールにはこんなものがあります↓

CSS GRADIENT ANIMATOR

 

まとめ

背景画像にグラデーションのアニメーションを重ねる方法でした。

linear-gradientと@keyframesは扱うのが少し難しいですが、この2つが使いこなせるようになるとjQuery顔負けのアニメーションがCSSだけで作れるようになります。

ぜひ使いこなせるようになってくださいね。