Comment obtenir des animations à dégradé fluide en CSS en utilisant « background-position » ?

Comment animer des dégradés en douceur à l'aide de CSS

Animer des dégradés en CSS peut être délicat, surtout si vous souhaitez obtenir des transitions fluides. Une approche qui donne des résultats incohérents consiste à modifier brusquement la position du dégradé.

Considérez le code suivant :

.animated {<br> largeur : 300px;<br> hauteur : 300px;<br> bordure : 1px noir uni;<br> animation : gra 5s infini;<br> animation-direction : inverse;<br> -webkit-animation : gra 5s infinite ;<br> -webkit-animation-direction : reverse;<br> animation-timing-function: linéaire;<br> -webkit-animation-timing-function: linéaire;<br>}</p><p>@keyframes gra {<br> 0% {</p><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%);

}
}

Ce code crée un dégradé animation, mais il change brusquement de position, ce qui entraîne un effet saccadé. Pour résoudre ce problème, nous pouvons utiliser la propriété background-position dans les images clés pour déplacer le dégradé en douceur.

Voici un code CSS amélioré qui permet d'obtenir une animation de dégradé fluide :

< ;div class="snippet-code">

<h1>dégradé</h1><p>{</p><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 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%}

}