Wie erstelle ich mit reinem CSS eine sich wiederholende Text-Fade-Animation zum „Laden“?

Erstellen einer sich wiederholenden CSS-Animation zum Ein- und Ausblenden von „Laden“-Text

Um einen kontinuierlichen Fade-Animationseffekt für das „Laden“ zu erzielen Lassen Sie uns in die Welt der CSS-Animationen eintauchen, ohne JavaScript zu verwenden. So geht's:

Animations-Keyframes einrichten

Die @keyframes-Regel definiert die Keyframes der Animation und gibt die Deckkraftwerte zu bestimmten Zeitstempeln an. In unserem Fall möchten wir, dass der Text ein- und ausgeblendet wird.

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

Animation anwenden

Wir wenden die Animation mithilfe von CSS auf das gewünschte HTML-Element an Klassenname. Die Animationseigenschaft übernimmt den Namen der Keyframe-Animation und die Dauer.

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

Browserübergreifende Kompatibilität

Um die browserübergreifende Kompatibilität sicherzustellen, ist es wichtig, Folgendes einzuschließen Browserspezifische Präfixe für die Animationseigenschaft.

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

HTML-Integration

Zuletzt fügen Sie das HTML-Element mit dem Klassennamen hinzu, um den animierten Text anzuzeigen.

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

Ergebnis

Die Animation blendet nun den Text „Laden“ kontinuierlich ein und aus, wodurch ein Schleifeneffekt entsteht.

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