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

Um eine Schleifenanimation in CSS zu erstellen, die Text ein- und ausblendet Beachten Sie Folgendes, ohne JavaScript zu verwenden:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

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.

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

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:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

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