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

Création d'une boucle d'animation CSS uniquement pour le fondu du texte "Chargement"

Dans ce tutoriel, nous visons à créer une animation CSS qui simule un texte de « Chargement » qui s'estompe sans utiliser JavaScript.

Énoncé du problème :

Vous avez créé une animation CSS de base à l'aide d'images clés, mais il n'y a pas de boucle ni de fondu entrant et sortant infiniment.

Solution :

Pour créer une animation en boucle, ajoutez les propriétés animation-iteration-count et animation-direction. animation-iteration-count spécifie le nombre de fois que l'animation doit se répéter, tandis que animation-direction détermine si l'animation doit être lue en avant ou en arrière.

Ensuite, vous devez inclure des préfixes spécifiques au navigateur pour une meilleure compatibilité.

Le code modifié ci-dessous intègre ces modifications :

<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 normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

Utilisation :

Appliquez la classe animate-flicker à l'élément où vous souhaitez que le "Chargement " texte à afficher :

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

Cela créera une animation infinie qui fait apparaître et disparaître le texte en continu.

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!