@keyframesを使って背景色が移り変わるアニメーションを作る方法

今回はCSSの@keyframesを使って背景色が移り変わるアニメーションを実装する方法を紹介します。

 

CSSアニメーションの基本

@keyframesを使ってアニメーションを行うにはanimationプロパティとセットで使う必要があります。

@keyframesではアニメーションがどのように変化していくかを指定し、animationでは作ったアニメーションに様々なオプションをつけていきます。

 

@keyframes

@keyftramesは「@keyframes + 任意の名前」でアニメーションを作成できます。0%がアニメーション開始時、100%がアニメーション終了時で、途中で30%や50%時点の変化具合を指定することもできます。

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

 

上記の例だと背景色が赤→オレンジ→ピンクとアニメーションしていきます。

また、ChromeやSafariではベンダーインプレックス「-webkit-」が必要です。-webkit-@keyframesというように記述します。

 

animation

animationには複数のプロパティがあるので順番に紹介していきます。

  • animation-name:@keyframesで決めたアニメーションの名前を指定
  • animation-duration:アニメーションの時間を指定
  • animation-timing-function:イージングを指定。linear、ease-out、ease-in-outなど
  • animation-delay:アニメーションを何秒遅らせるかを指定
  • animation-iteration-count:アニメーションを何回繰り返すかを指定。無限ループの場合はinfinateを指定
  • animation-direction:アニメーションの再生方向を指定
  • animation-fill-mode:アニメーションの開始前と終了後のスタイルを指定
  • animation-play-state:アニメーションの再生・終了を指定

 

また、animationプロパティはこれらを全てまとめて記述できるショートハンドプロパティです。

/* 記述例 */
body {
  animation: test 5s ease 1s infinite;
}

 

上記のコードでは

  • animation-name: test;
  • animation-duration: 5s;
  • animation-timing-function: ease;
  • animation-delay: 1s;
  • anmation-iteration-count: infinate;

を同時に指定しています。

 

背景色を変化させるアニメーション

前置きが長くなりましたが、いよいよ背景色を変化させるアニメーションについて解説します。

アニメーション名はbg-colorとし、0〜100%で移り変わらせる背景色を指定しましょう。ベンダーインプレックスも一応付与しておきます。

@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}

 

@keyframesでアニメーションを作成したら、CSSのセレクタにanimationプロパティで指定していきます。

ページ全体の背景色を遷移させたい場合はbodyタグにanimationプロパティを指定します。

body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}

 

これでページ全体の背景色が移り変わるアニメーションができました!