Wie erstelle ich eine Endlosschleifen-Fading-Animation zum „Laden“ von Text mit CSS?

Erstellen einer reinen CSS-Animationsschleife zum Ausblenden von „Laden“-Text

In diesem Tutorial wollen wir eine CSS-Animation erstellen, die simuliert ein ausgeblendeter „Lade“-Text ohne Verwendung von JavaScript.

Problemstellung:

Sie haben eine einfache CSS-Animation mit Keyframes erstellt, die jedoch nicht in einer Schleife abläuft und nicht ein- und ausgeblendet wird unendlich.

Lösung:

Um eine Schleifenanimation zu erstellen, fügen Sie die Eigenschaften „animation-iteration-count“ und „animation-direction“ hinzu. „animation-iteration-count“ gibt an, wie oft die Animation wiederholt werden soll, während „animation-direction“ bestimmt, ob die Animation vorwärts oder rückwärts abgespielt werden soll.

Als nächstes müssen Sie browserspezifische Präfixe für eine bessere Kompatibilität einfügen.

Der geänderte Code unten enthält diese Änderungen:

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

Verwendung:

Wenden Sie die Klasse „animate-flicker“ auf das Element an, bei dem Sie „Laden“ möchten " Text soll erscheinen:

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

Dadurch wird eine unendliche Animation erstellt, die den Text kontinuierlich ein- und ausblendet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Endlosschleifen-Fading-Animation zum „Laden“ von Text mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!