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-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-10-26 12:54:29

Original

1069 Leute haben es durchsucht

Here are a few question-style titles that fit your provided content:

* CSS Animation Loop: How to Fade Text In and Out Infinitely without JavaScript?
* Creating an Infinite Fading Loop for Text in CSS: Solving the Compatibility Issue
* Making Text

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwenden Sie den aktualisierten Code mit folgendem HTML:

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

Nach dem Login kopieren

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!