Wie erstelle ich eine CSS-Textanimationsschleife zum Ein- und Ausblenden „Laden' ohne JavaScript?

Einfache CSS-Animationsschleife: Text ein- und ausblenden „Laden“

Zum Erstellen einer Schleifenanimation in CSS, die Text ein- und ausblendet Beachten Sie Folgendes, ohne JavaScript zu verwenden:

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

Die @keyframes-Regel definiert die Animation selbst. In diesem Fall ändert die Animation einfach die Deckkraft des Elements von vollständig undurchsichtig zu vollständig transparent und wieder zurück.

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

Die Klasse .animate-flicker wendet die Animation auf jedes Element mit dieser Klasse an. Die Animationseigenschaft gibt den Namen der Animation, die Dauer jeder Iteration (in diesem Fall 1 Sekunde) und an, ob die Animation unendlich wiederholt werden soll.

Zu beachten ist, dass der obige Code möglicherweise nicht funktioniert in allen Browsern. Um die Kompatibilität mit einer größeren Auswahl an Browsern sicherzustellen, müssen Sie der Animationseigenschaft die entsprechenden Herstellerpräfixe hinzufügen. Zum Beispiel:

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

Mit diesen hinzugefügten Herstellerpräfixen sollte die Animation in den meisten modernen Browsern funktionieren.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine CSS-Textanimationsschleife zum Ein- und Ausblenden „Laden' ohne JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!