Wie erreicht man mit „background-position' glatte Verlaufsanimationen in CSS?

So animieren Sie Farbverläufe reibungslos mit CSS

Das Animieren von Farbverläufen in CSS kann schwierig sein, insbesondere wenn Sie sanfte Übergänge erzielen möchten. Ein Ansatz, der zu inkonsistenten Ergebnissen führt, besteht darin, die Position des Farbverlaufs abrupt zu ändern.

Bedenken Sie den folgenden Code:

.animated {<br> width: 300px;<br> height: 300px;<br> Rand: 1px durchgehend schwarz;<br> Animation: gra 5s unendlich;<br> Animationsrichtung: umgekehrt;<br> -webkit-animation: gra 5s unendlich;<br> -webkit-animation-direction : umgekehrt;<br> Animation-Timing-Funktion: 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%);

Nach dem Login kopieren

}
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%);

}
}

Dieser Code erstellt einen Farbverlauf Animation, aber es ändert abrupt seine Position, was zu einem abgehackten Effekt führt. Um dieses Problem zu lösen, können wir die Eigenschaft „background-position“ innerhalb von Keyframes verwenden, um den Farbverlauf reibungslos zu verschieben.

Hier ist ein verbesserter CSS-Code, der eine reibungslose Farbverlaufsanimation erreicht:

< ;div 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;

Nach dem Login kopieren

}

@-webkit-keyframes Animation {

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

}
@-moz-keyframes Animation {

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

}
@keyframes Animation {

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

}