Wozu dienen Keyframes und wie funktionieren sie?

@keyframes — CSS-Regel, die die Schlüsselbilder einer Animation definiert. Sie ermöglicht die Erstellung einer Abfolge von Zuständen eines Elements zu verschiedenen Zeitpunkten, die der Browser nahtlos interpoliert und so einen Bewegungseffekt erzeugt. Funktioniert durch die Definition eines Satzes von Stilen für das Element bei bestimmten Prozentwerten (von 0% bis 100%) oder unter Verwendung der Schlüsselwörter from (0%) und to (100%).

Um keyframes zu verwenden, sind folgende Schritte notwendig:

1. Definieren Sie die Regel @keyframes mit einem eindeutigen Namen.
2. Geben Sie innerhalb von @keyframes Stile für verschiedene Zeitmarken an (in Prozent oder from/to).
3. Wenden Sie die erstellte Animation mit der CSS-Eigenschaft animation auf das Element an.

@keyframes slidein {
  from {
    transform: translateX(0%); // Anfangszustand: keine Verschiebung in X
  }

  to {
    transform: translateX(100%); // Endzustand: Verschiebung um 100% in X
  }
}

.element {
  animation-name: slidein; // Name der Animation, oben definiert
  animation-duration: 3s; // Dauer der Animation
  animation-timing-function: ease-in-out; // Geschwindigkeitsfunktion der Animation
  animation-delay: 1s; // Verzögerung vor Beginn der Animation
  animation-iteration-count: infinite; // Anzahl der Wiederholungen (hier unendlich)
  animation-direction: alternate; // Animationsrichtung (vorwärts, dann rückwärts)
}

Wichtige Eigenschaften animation, die zusammen mit @keyframes verwendet werden:

Eigenschaft	Beschreibung
animation-name	Name von @keyframes, das angewendet werden soll.
animation-duration	Dauer eines Animationszyklus (z.B. 2s, 500ms).
animation-timing-function	Geschwindigkeitsfunktion der Animation (z.B. linear, ease, ease-in, cubic-bezier).
animation-delay	Verzögerung vor Beginn der Animation (z.B. 1s).
animation-iteration-count	Anzahl der Wiederholungen der Animation (infinite für unendliche Wiederholung).
animation-direction	Richtung der Animation (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Bestimmt, welche Stile vor und nach der Animation angewendet werden.
animation-play-state	Bestimmt, ob die Animation läuft oder pausiert ist.