Comment créer une boucle d'animation de texte CSS Fade In & Out \"Chargement\" sans JavaScript ?

Boucle d'animation CSS simple : fondu entrant et sortant du texte "Chargement"

Pour créer une animation en boucle en CSS qui fait apparaître et disparaître du texte en fondu sans utiliser JavaScript, considérez ce qui suit :

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

La règle @keyframes définit l'animation elle-même. Dans ce cas, l'animation change simplement l'opacité de l'élément de complètement opaque à entièrement transparent et vice-versa.

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

La classe .animate-flicker applique l'animation à n'importe quel élément avec cette classe. La propriété animation spécifie le nom de l'animation, la durée de chaque itération (dans ce cas, 1 seconde) et si l'animation doit se répéter à l'infini.

Une chose à noter est que le code ci-dessus peut ne pas fonctionner dans tous les navigateurs. Pour garantir la compatibilité avec un plus large éventail de navigateurs, vous devez ajouter les préfixes de fournisseur appropriés à la propriété d'animation. Par exemple :

<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>

Avec l'ajout de ces préfixes de fournisseurs, l'animation devrait fonctionner dans la plupart des navigateurs modernes.

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!