前置き
（現状）linear-gradientは色をアニメーションできない。
背景色に線形グラデーションを敷きたい時によく使われる、
linear-gradient（およびrepeating-linear-gradient）。
アニメーションで色を徐々に遷移させたいところですが、
グラデーション関数に対して直接アニメーションをかけることはできません。
CSSカスタムプロパティ（通称CSS変数）と@propertyを使用すると
関数中に内包される色や角度に対してアニメーションを設定できるのですが、
肝心の@propertyのブラウザ対応状況がいまいちなため現状では使えません。
そこで現状でできる、グラデーションのアニメーション方法について書いていきます。
とりあえず虹色のグラデーションを作る
body {
width: 100%;
min-height: 100vh;
background-image: repeating-linear-gradient(
to bottom right,
hsl(0deg, 80%, 50%),
hsl(60deg, 80%, 50%),
hsl(120deg, 80%, 50%),
hsl(180deg, 80%, 50%),
hsl(240deg, 80%, 50%),
hsl(300deg, 80%, 50%),
hsl(360deg, 80%, 50%) 50%
);
}
虹色（七色というより六色ですが）のグラデーションを対角線に沿って、
0%から50%の範囲でrepeating-linear-gradientを使って配置します。
虹色の発色を思い通りにコントロールするときはhsl()が便利です。
開始点の色相は何色でも構いませんがそこから60degごとに色を置けば綺麗な発色になるはずです。
最後の色は最初と同じ色になるようにします（つまり360度分）。
最後の50%だけ指定しておけば、0の時と途中の経由点については勝手に中間点を計算してくれます。
50%までの指定とすることで、50%〜100%は同じグラデーションが描かれます。
またグラデーションの角度については角度指定ではなくto bottom rightのようなキーワード指定を使います。
虹色を超拡大して引き伸ばす
body {
width: 100%;
min-height: 100vh;
background-image: repeating-linear-gradient(
to bottom right,
hsl(0deg, 80%, 50%),
hsl(60deg, 80%, 50%),
hsl(120deg, 80%, 50%),
hsl(180deg, 80%, 50%),
hsl(240deg, 80%, 50%),
hsl(300deg, 80%, 50%),
hsl(360deg, 80%, 50%) 50%
);
background-size: 1000% 1000%;
}
次にbackground-sizeを大胆に縦横ともに1000%くらいの値を指定します。
これで虹色が引き伸ばされ画面上では2色〜3色分くらいの色のグラデーションが見えるはずです。
background-positionにアニメーションを指定する
body {
width: 100%;
min-height: 100vh;
background-image: repeating-linear-gradient(
to bottom right,
hsl(0deg, 80%, 50%),
hsl(60deg, 80%, 50%),
hsl(120deg, 80%, 50%),
hsl(180deg, 80%, 50%),
hsl(240deg, 80%, 50%),
hsl(300deg, 80%, 50%),
hsl(360deg, 80%, 50%) 50%
);
background-size: 1000% 1000%;
animation: colorRotation 240s linear 0s infinite;
}
@keyframes colorRotation {
from {
background-position: 0 0;
}
to {
background-position: 500% 500%;
}
}
あとはbackground-positionにアニメーションを指定するだけです。
アニメーションを間隔は0%からbackground-sizeで指定したサイズの半分までにします。
これで切れ目なくグラデーションがループされます。
See the Pen Untitled by ichimonzi (@ichimonzi) on CodePen.
一色を固定してもう一色だけアニメーションする場合
グラデーション関数に対して直接アニメーションをかけることはできませんが、
background-colorに関してはアニメーションできます。
そこで透明色（transparent）と固定色の間でグラデーションを作り、
アニメーションする色はbackground-colorを使うことによって擬似的に
グラーデーションのアニメーションをすることができます。
See the Pen Untitled by ichimonzi (@ichimonzi) on CodePen.
おまけ
@propertyが全面サポートされるようになれば、
こんなサイケデリックパターンもグリグリアニメーションできるようになります。
実際見たい方はこちら。
※（現状PC Chrome、Chrome for Android、Edgeなどでしか動きません）