Comment animer des dégradés et des motifs de texte en CSS —

Dans cette astuce rapide, nous montrerons à quel point il est facile d’animer un dégradé d’arrière-plan avec CSS.

Dans un article récent, nous avons montré comment définir un dégradé d’arrière-plan sur du texte. La démo CodePen ci-dessous montre le résultat.

Assurez-vous de lire cet article si vous ne savez pas comment nous sommes arrivés à ce résultat, car nous nous appuierons sur cet exemple ci-dessous.

Pour le bien de cette démo, ajoutons quelques couleurs supplémentaires à notre arrière-plan dégradé :

h1 {
  background-image: linear-gradient(
    45deg,
    #ffb3ba,
    #c49c6e,
    #bfbf76,
    #77b084,
    #ff7e74,
    #3b82f6,
    #c084fc,
    #db2777
   );
}

Si nous éteignons background-clip: text et text-color: transparent pendant un instant, nous avons une meilleure idée de la façon dont notre dégradé remplit la zone de contenu du texte.

Passons maintenant aux étapes d’animation de notre dégradé d’arrière-plan.

Étape 1 : Ajuster la taille de l’arrière-plan

Pour animer notre arrière-plan dégradé, nous devons le rendre plus grand que la zone de contenu du texte afin que nous ne puissions pas tout voir en même temps. Nous pouvons le faire avec le pratique background-size propriété. (Tu peux tout savoir sur la taille de l’arrière-plan ici.)

Je vais définir la largeur de notre dégradé d’arrière-plan à trois fois la largeur de notre élément de titre :

h1 {
  background-size: 300% 100%;
}

Désormais, seul un tiers de l’arrière-plan dégradé sera visible à la fois, comme indiqué ci-dessous.

Étape 2 : Définir une animation

Ensuite, nous allons mettre en place une animation qui déplacera l’arrière-plan afin que nous en voyions différentes parties au fil du temps.

Nous pouvons mettre en place une règle d’animation simple comme celle-ci :

h1 {
  animation: gradientAnimation 8s linear infinite;
}

Cela déplacera l’arrière-plan d’avant en arrière toutes les 16 secondes.

Ensuite, nous allons mettre en place un @keyframes déclaration:

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

C’est simple @keyframes La déclaration déplacera notre arrière-plan du haut à gauche vers le bas à droite toutes les huit secondes.

Dans le stylo ci-dessous, nous avons une fois de plus désactivé background-clip: text et color: transparent afin que nous puissions voir ce qui se passe en arrière-plan.

Une fois que nous avons réactivé background-clip: text et color: transparenton voit le produit fini.

Plutôt cool!

Animer une image d’arrière-plan

Dans notre article sur l’ajout d’effets et de motifs de dégradé au texte, nous avons également utilisé une image d’arrière-plan florale. (Voir le stylo pour ça ici.)

Essayons également d’animer cet arrière-plan. Nous procéderons légèrement différemment, car nous ne voulons pas déformer l’image d’arrière-plan.

Supprimons background-size: contain à partir de la démo originale et ne définissez pas du tout de taille d’arrière-plan. Cela nous laisse avec ceci :

h1 {
  color: transparent;
  -webkit-background-clip: text; 
  background-clip: text; 
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

Le résultat est affiché dans la démo CodePen ci-dessous.

Essayez d’éteindre background-clip: text et text-color: transparent pendant un moment si vous voulez voir ce qui se passe en arrière-plan.

Notre image d’arrière-plan se répète par défaut, ce qui n’a pas l’air trop mal pour cette image particulière. (Juste par intérêt, essayez d’ajouter background-repeat: no-repeat pour voir ce qui se passe sans un arrière-plan répétitif.) Dans d’autres situations, où l’image d’arrière-plan ne s’agence pas aussi bien, vous souhaiterez peut-être empêcher l’image de se répéter, puis utiliser background-size pour agrandir l’image, comme nous l’avons fait avec l’arrière-plan dégradé ci-dessus. Par exemple:

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
}

Voici l’effet de cela sur notre démo florale.

Conclusion

Nous pourrions faire des animations beaucoup plus spectaculaires que cela, mais le but était ici de rester simple. Vous pouvez approfondir les images clés et les animations CSS dans Comment démarrer avec l’animation CSS. Vous pouvez également jouer avec le timing de l’animation, l’angle du dégradé, etc.

Comme mentionné dans l’article précédent, amusez-vous avec cela mais n’en faites pas trop, car trop d’animations de ce type peuvent devenir ennuyeuses. Un arrière-plan animé subtil sur un titre pourrait simplement ajouter la touche d’intérêt ou d’intrigue dont vous avez besoin pour garder votre public engagé.