イントロ

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(-45deg, peru, papayawhip);
  transition: 0.5s;
}

div:hover{
  background-image: linear-gradient(-45deg, peru, peru);
  transition: 0.5s;
}

このコードは何が悪いのですか.グラデーションからソリッドフィルまで、きれいで、濃い、グラデーションのアニメーションを作るべきです.うまくいくはずですね.
間違い
background-image is not animatable.
何が開発者ですか?私は私のベッドに横たわって、可能性を考慮しました.JavaScriptのDOM関数を使うことができましたbackgroundImage そして、テンプレートリテラルは色を変更します.私はRGBをCMYK関数に使用し、RequestAnimationフレームを呼び出します.または、私はそれを調べることができました.
見つけたthis.
このスタックオーバースレッドが示唆するものは、基本的にbackground-size “200 % 200 %”(私は、ターゲットウィンドウの2倍の大きさを仮定してください)とパーセントbackground-position .
クール!しばらくの間ドキュメントを読んでいたので、以下のように考えました.

仮定するlinear-gradient(145deg, red, blue) , もちろん.
スタックオーバーフローコードと背景位置に関する私の新たな知識から、私は私のステップを持っていました.

書き込み勾配

増加勾配サイズ

中心勾配50% 50% ) それで、それは同じように見えました

背景位置はアニメーション可能ですので、どちらかを翻訳します100% 100% or 0% 0% それをより青いかより赤に見えるように

ああ!問題解決.以下に作業例を示します.
しかし、あなたがおそらく言うことができるように、それは完璧ではない100% 100% まだいくつかの赤い色合いがあり、青色の背景には、このdivは間違いなく目立つ.また、200 %のバックグラウンドサイズと50 %のバックグラウンド位置を組み合わせることで、わずかにグラデーションを変更します.

私のような完璧な執拗な開発者は何ですか?過度のブレーンストーミングの後、私はこれらのものを考え出しました:

background-size 生きている

グラデーションの変更red, blue, blue つの角で完全に青い部分を作ります.

それで私の手順は次のようになりました.

divを通常のグラデーションで開始する
*ホバーでは、これらのことを行います.

変更の背景サイズ

100 % 100 %に背景位置を変更blue blue
勾配の一部

赤と青よりもより良い色を使用してください

コードをいじっている間、私はホバーの上で背景サイズを変える必要がないとわかりました;200 %を残して実際に同じ色の背景からdivを区別するのに役立ちます.私もクールな効果のためのクイックボックスの影を追加しました.
そしてここにある!純粋なCSSで首尾よくアニメーション線形勾配.
役に立つ?混乱?思考コメントを残してください!