「background-position」を使用してCSSで滑らかなグラデーションアニメーションを実現するにはどうすればよいですか?

CSS を使用してグラデーションをスムーズにアニメーション化する方法

CSS でのグラデーションのアニメーション化は、特にスムーズな遷移を実現したい場合には難しい場合があります。一貫性のない結果が得られるアプローチの 1 つは、グラデーションの位置を突然変更することです。

次のコードを考えてみましょう。

.animated {<br> 幅: 300px;<br> 高さ: 300px;<br> ボーダー: 1 ピクセル 黒一色;<br> アニメーション: 5 秒無限;<br> アニメーションの方向: 逆;<br> -webkit-animation: 5 秒無限;<br> -webkit-animation-direction : reverse;<br> アニメーション タイミング関数: Linear;<br> -webkit-animation-timing-function: Linear;<br>}</p><p>@keyframes gra {<br> 0% {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);

ログイン後にコピー

}
50% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);

}
100% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

}
}

このコードはグラデーションを作成しますアニメーションですが、位置が突然変わるため、途切れ途切れの効果が生じます。この問題を解決するには、キーフレーム内でbackground-positionプロパティを使用して、グラデーションをスムーズに移動できます。

スムーズなグラデーションアニメーションを実現する改良されたCSSコードを次に示します:

< ;ディビジョンclass="snippet-code">

<h1 id="gradient">gradient</h1><p>{</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;

-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;

ログイン後にコピー

}

@-webkit-keyframes アニメーション {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@-moz-keyframesアニメーション {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@keyframes アニメーション {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}