こんにちは（・∀・）
今回ご紹介するサンプルは、グラデーションの背景色をアニメーションで変更するサンプルです。CSS3のlinear-gradientとanimationを使っただけの簡単な構造です。
linear-gradientとanimationで背景色の変更
サンプルの背景色はhslで指定してあります。値の数値を変更すればグラデーションの色を変えることができます。
サンプル
CSS
body {
background: linear-gradient(to bottom, hsl(180, 100%, 50%), hsl(220, 100%, 50%), hsl(300, 100%, 50%));
background-size: 100% 500%;
animation: bgcolor 10s linear infinite alternate;
}
@keyframes bgcolor {
0% { background-position: 50% 0% }
25% { background-position: 50% 50% }
50% { background-position: 50% 90% }
75% { background-position: 50% 50% }
100% { background-position: 50% 0% }
}
グラデーションがうごいているように見せるのは大きい数値で設定した背景をkeyframesの読み込み%によって位置を指定して表示させているからです。