Comment obtenir des animations à dégradé fluide en CSS ?

Implémentation d'une animation de dégradé fluide avec CSS

Question : Animation de dégradé non naturel

Dans le domaine des dégradés CSS, il existe un défi séculaire qui tourmente de nombreux développeurs : le mouvement saccadé et brusque des dégradés pendant l'animation. Cet effet discordant se produit lorsque le dégradé change brusquement de position à chaque étape de l'animation.

Considérons l'exemple suivant :

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

Dans ce code, la position du dégradé se déplace soudainement entre les trois images, ce qui entraîne une animation saccadée. L'objectif est d'obtenir une transition transparente et fluide, reflétant le flux naturel de progression des couleurs.

Réponse : Maîtrise de l'animation de dégradé

Pour découvrir le secret de l'animation de dégradé fluide, nous introduisons une approche différente . Au lieu de modifier directement la position du dégradé, nous décalons sa taille. Ce changement subtil entraîne une amélioration frappante de la fluidité de l'animation :

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

Dans ce code amélioré, nous manipulons désormais la propriété background-size. L'animation commence avec une petite taille de dégradé, en l'augmentant progressivement jusqu'à ce que le dégradé recouvre tout l'élément. Cela crée un effet où les couleurs semblent couler de manière transparente à travers l'élément.

En employant cette technique, nous avons obtenu une animation dégradée gracieuse et captivante, donnant vie à vos créations avec une touche d'élégance et de 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!