CSSを使った背景アニメーション

CSSを使って背景色を変化させるアニメーションを作る方法を紹介します。animationとkeyframesを使った簡単なアニメーションで単色ほ背景やグラデーションの背景を変化させることができます。

背景アニメーションの作り方

まずは、単純に1色を使って背景を変化させるアニメーションを作ります。

body {
  background: #3bb7f9;
  animation: bgColor 10s infinite;
}
@keyframes bgColor {
  0% {
    background: #3bb7f9;
  }
  50% {
    background: #0774af;
  }
  100% {
    background: #3bb7f9;
  }
}

0～50％で背景色を変化させ、50～100％で最初の背景色に戻すというアニメーションを10秒かけて行っています。

DEMO

グラデーションを変化させる

今度は、グラデーション背景を変化させるアニメーションを作ります。

<body>
  <div class="grad1"></div>
  <div class="grad2"></div>
  <div class="grad3"></div>
</body>

//CSS
.grad1,.grad2,.grad3 {
  position: absolute;
}
.grad2,.grad3 {
  opacity: 0;
}
.grad1 {
  background: linear-gradient(#0584c5, #c405c4);
  animation: grad1 10s infinite;
}
.grad2 {
  background: linear-gradient(#05c468, #c405c4);
  animation: grad2 10s infinite;
  animation-delay: 2s;
}
.grad3 {
  background: linear-gradient(#05c468, #0584c5);
  animation: grad3 10s infinite;
  animation-delay: 8s;
}
@keyframes grad1 {
  0% {opacity: 1.0;}
  10% {opacity: 0.8;}
  20% {opacity: 0.6;}
  30% {opacity: 0.4;}
  40% {opacity: 0.2;}
  50% {opacity: 0.1;}
  60% {opacity: 0.2;}
  70% {opacity: 0.4;}
  80% {opacity: 0.6;}
  90% {opacity: 0.8;}
  100% {opacity: 1.0;}
}
@keyframes grad2 {
  0% {opacity: 0;}
  10% {opacity: 0.2;}
  20% {opacity: 0.4;}
  30% {opacity: 0.6;}
  40% {opacity: 0.8;}
  50% {opacity: 1.0;}
  60% {opacity: 0.8;}
  70% {opacity: 0.6;}
  80% {opacity: 0.4;}
  90% {opacity: 0.2;}
  100% {opacity: 0;}
}
@keyframes grad3 {
  ～grad2と同じ設定～
}

まず、各ボックスを「position: absolute;」にして重ねます。そして、2番目と3番目のボックスは「opacity: 0;」にして見えないようにしておきます。また、「animation-delay」を使って、アニメーションを開始するタイミングをずらしています。
あとは、keyframesで不透明度を徐々に変化するように設定をすれば、グラデーション背景のアニメーションができるようになります。

DEMO

以上が、CSSを使った背景アニメーションの作成方法となります。

背景アニメーションの作り方

グラデーションを変化させる

シェア

おすすめの記事