CSSで背景色を変化させるアニメーションの作成方法

CSS

CSSで背景色を変化させるアニメーションの作成方法を紹介します。

目次から読む

デモ

See the Pen
背景色を変化させるアニメーション by Sosak (@Sosak2021)
on CodePen.

HTML

<section class="section-rain"></section>

SCSS

.section-rain {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('https://source.unsplash.com/random');
  background-size: cover;
  animation: animate 6s linear infinite;

}

@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

hue-rotateを使います。
これを0度から360度の間でアニメーションさせることで、色の変化が楽しめます。
他には、これに加えて、sectionのbefore疑似要素などを設定して、雨や雪などを動かすこともできます。

CSS

Posted by devsakaso