Comment créer une animation de boucle de fondu infini pour le texte « Chargement » avec CSS ?

Animation CSS sans effort : boucle de fondu infini pour le texte de "chargement"

Pour obtenir une animation en boucle transparente pour le texte qui apparaît et disparaît à plusieurs reprises , nous plongeons dans le monde des animations CSS. Bien que la tentative initiale fournisse un cadre squelettique, elle manquait de la finesse requise pour restituer l'animation sur différents navigateurs.

Combler le fossé entre les navigateurs : préfixer l'animation

La clé garantir la compatibilité entre navigateurs réside dans les préfixes spécifiques au navigateur. Ces préfixes demandent aux différents navigateurs d'interpréter l'animation de manière cohérente. Le code suivant intègre ces préfixes :

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

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

Application de l'animation : fondu du texte "Chargement"

Pour appliquer l'animation, on ajoute simplement le "animer- flicker" à l'élément contenant le texte que nous souhaitons animer :

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

Voici la boucle fascinante : regarder le texte s'estomper

Avec cette touche finale, vous sera témoin d'une boucle sans fin de texte en fondu, entièrement pilotée par CSS, fournissant un repère visuel subtil mais captivant pour indiquer un processus de chargement.

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!