CSSで虹色に遷移するグラデーションのアニメーション

前置き

（現状）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などでしか動きません）