Comment puis-je créer des animations de dégradé CSS fluides sans changements de position brusques ?

Animation de dégradés à l'aide de CSS

Certains scénarios peuvent présenter des difficultés pour réaliser des animations de dégradé fluides. Un problème notable concerne les changements brusques de position pendant l’animation. Le code fourni illustre ce problème :

.animated {
  animation: gra 5s infinite;
  animation-direction: reverse;
}

@keyframes gra {
  0% {
    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%);
  }
}

Solution

Pour résoudre ce problème, vous pouvez utiliser la propriété background-position de CSS en conjonction avec des images clés pour créer un rendu plus fluide. animation. Considérez le code suivant :

#gradient
{
    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%}
}

Dans ce code :

• La propriété background-size garantit la boucle transparente du dégradé.
• Les contrôles de propriété background-position la position de départ du dégradé.
• Les images clés animent la propriété background-position, créant l'illusion du dégradé mouvement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!