全画面のグラデーションをアニメーションさせる

CSSのグラデーションを使用してそれをアニメーションさせていきます。
言葉だといまいち伝わりづらいので、デモを用意しました。
写真は僕の生まれ故郷の山形に向かう新幹線から撮影したものです。盆地ならではの風景。
縦のアニメーションと横のアニメーションがあります。
Firefoxは縦のグラデーションがうまくいきませんでした。

デモ

DEMO

ソース

HTMLは下記です。

<div class="anim01">
  <div class="bg"></div>
</div>
<div class="anim02">
  <div class="bg"></div>
</div>

CSSは下記です。

.anim01 {
  background: -webkit-gradient(linear, left top, left bottom, from(#bbdd44), color-stop(33%, #eba65b), color-stop(66%, #4e97c8), to(#282e32));
  background: -webkit-linear-gradient(#bbdd44, #eba65b, #4e97c8, #282e32);
  background: linear-gradient(#bbdd44, #eba65b, #4e97c8, #282e32);
  background-size: 400%;
  -webkit-animation: gradAnim 20s ease infinite;
          animation: gradAnim 20s ease infinite;
  height: 100%;
}

.anim02 {
  background: -webkit-gradient(linear, right top, left top, from(#bbdd44), color-stop(33%, #eba65b), color-stop(66%, #4e97c8), to(#282e32));
  background: -webkit-linear-gradient(180deg, #bbdd44, #eba65b, #4e97c8, #282e32);
  background: linear-gradient(270deg, #bbdd44, #eba65b, #4e97c8, #282e32);
  background-size: 400%;
  -webkit-animation: gradAnim02 20s ease infinite;
          animation: gradAnim02 20s ease infinite;
  height: 100%;
}

.bg {
  background: url("../images/bg.jpg") no-repeat 0 0;
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

@-webkit-keyframes gradAnim {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 100%;
  }
}

@keyframes gradAnim {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 100%;
  }
}
@-webkit-keyframes gradAnim02 {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}
@keyframes gradAnim02 {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}

解説

共通

「linear-gradient」で4色のグラデーションを作っています。
「-webkit-gradient」はAndroid 2系に対応させるために記述しています。
「background-size」でそのグラデーションを400%にしています。（色数によって変えてください）

縦のアニメーション

「linear-gradient」は角度の指定なしだと縦の線形グラデーションになるので、一番最後に指定した色が一番下に表示されます。
あとはCSSアニメーションを使用して「background-position」を縦に100%ずつ移動させます。

横のアニメーション

「linear-gradient」に角度を入れて横のグラデーションにします。
アニメーションでは「background-position」で横に100%ずつ移動させます。

さいごに

CSSのグラデーションは便利ですが、使用する場合はデザイナーに確認してからのほうが良いかと思います。
微妙な色のずれなどが、発生する可能性があるからです。
また「linear-gradient」はIEは10からの対応になりますので、ご注意ください。