Hier sind einige Titel im Fragenstil, die zu Ihrem bereitgestellten Inhalt passen: * CSS-Animationsschleife: Wie kann man Text ohne JavaScript unbegrenzt ein- und ausblenden? * Erstellen einer Endlosschleife für Text in CS

Einfache CSS-Animationsschleife: Ein- und Ausblenden von „Laden“ von Text

Frage

Wie erstellt man ein Unendliches? Schleife in einer CSS-Animation, die Text ein- und ausblendet, ohne JavaScript zu verwenden? Trotz aller Bemühungen bleibt das Problem ungelöst:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

Antwort

Um die Kompatibilität zwischen Browsern sicherzustellen, fügen Sie Herstellerpräfixe in Ihr CSS ein:

@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;
}

Verwenden Sie den aktualisierten Code mit folgendem HTML:

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

Das obige ist der detaillierte Inhalt vonHier sind einige Titel im Fragenstil, die zu Ihrem bereitgestellten Inhalt passen: * CSS-Animationsschleife: Wie kann man Text ohne JavaScript unbegrenzt ein- und ausblenden? * Erstellen einer Endlosschleife für Text in CS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!