Comment créer une animation de fondu de texte en boucle « Chargement » avec Pure CSS ?

Création d'une animation CSS en boucle pour faire un fondu entrant et sortant du texte "Chargement"

Pour obtenir un effet d'animation de fondu continu pour le "Chargement" texte sans utiliser JavaScript, plongeons dans le monde des animations CSS. Voici comment procéder :

Configuration des images clés de l'animation

La règle @keyframes définit les images clés de l'animation, en spécifiant les valeurs d'opacité à des horodatages spécifiques. Dans notre cas, nous voulons que le texte apparaisse et disparaisse.

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}</code>

Application de l'animation

Nous appliquons l'animation à l'élément HTML souhaité à l'aide du CSS nom de classe. La propriété animation prend le nom de l'animation par image clé et la durée.

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

Compatibilité multi-navigateurs

Pour garantir la compatibilité multi-navigateurs, il est essentiel d'inclure préfixes spécifiques au navigateur pour la propriété d'animation.

<code class="css">.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

Intégration HTML

Enfin, ajoutez l'élément HTML avec le nom de la classe pour afficher le texte animé.

<code class="html"><div class="animate-flicker">Loading...</div></code>

Résultat

L'animation fera désormais apparaître et disparaître continuellement le texte "Chargement", créant un effet de boucle.

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!