CSS3：背景色アニメーション

See the Pen GgmbBv by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSSのみでbodyタグの背景色をアニメーションでじんわり変化させています。

サンプルはSassで書いていますがCSSで抜粋すると下記になっています。

body {
  animation: bgAnime 20s infinite linear;
}

@keyframes bgAnime {
  0% {
    background-color: #00b3ca;
  }
  25% {
    background-color: #7dd0b6;
  }
  50% {
    background-color: #f69256;
  }
  75% {
    background-color: #ead98b;
  }
  100% {
    background-color: #00b3ca;
  }
}

「bgAnime」という背景色の変わるキーフレームを設定し、それをbodyタグに「animation」プロパティで20秒で再生し続けるという設定です。

今回の要としては、keyframesの0%と100%に同じ背景色を設定しておく点です。
100%の次の瞬間に0%にループするので、そこで色が違うとパッと変わって不自然になります。

ループするアニメーションでは色に限らず位置や大きさなどの値も100%で0%時の値に戻すのが定石になります。