Einführung in CSS-Animationen mit `@keyframes`

CSS-Animationen ermöglichen es, den Übergang von einem CSS-Stilzustand zu einem anderen zu animieren. Im Gegensatz zu CSS-Transitions, die nur einen Start- und Endzustand definieren, erlauben Animationen die Definition mehrerer Zwischenschritte über sogenannte @keyframes.

Dies ermöglicht die Erstellung komplexer, mehrstufiger Animationen, die ohne JavaScript auskommen.

Die zwei Hauptkomponenten

Eine CSS-Animation besteht immer aus zwei Teilen:

1. Die @keyframes-Regel: Definiert die einzelnen "Szenen" oder Schritte der Animation.
2. Die animation-Eigenschaften: Weisen die @keyframes-Animation einem Element zu und konfigurieren, wie sie sich verhalten soll (Dauer, Wiederholung etc.).

1. @keyframes definieren

Die @keyframes-Regel legt fest, wie die CSS-Eigenschaften eines Elements zu bestimmten Zeitpunkten während der Animation aussehen sollen. Die Zeitpunkte werden in Prozent (%) oder mit den Schlüsselwörtern from (entspricht 0%) und to (entspricht 100%) angegeben.

Einfaches Beispiel

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Mehrstufiges Beispiel

Sie können beliebig viele Zwischenschritte definieren.

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

2. Animation auf ein Element anwenden

Sobald die @keyframes definiert sind, werden sie über die animation-Eigenschaften einem Element zugewiesen.

Die animation-Eigenschaften

• animation-name: Der Name der @keyframes-Regel.
• animation-duration: Die Dauer eines Animationszyklus (z.B. 2s, 500ms).
• animation-delay: Eine Verzögerung, bevor die Animation startet.
• animation-timing-function: Die Beschleunigungskurve (z.B. ease-in, linear).
• animation-iteration-count: Wie oft die Animation wiederholt wird (infinite für unendlich).
• animation-direction: Die Richtung der Animation (normal, reverse, alternate).
• animation-fill-mode: Legt fest, ob die Stile der Animation vor oder nach der Ausführung sichtbar bleiben (forwards, backwards, both).
• animation-play-state: Pausiert (paused) oder startet (running) eine Animation.

Beispiel

.mein-element {
  /* Weist die 'pulse'-Animation zu und konfiguriert sie */
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

Kurzschreibweise (animation)

Die meisten Eigenschaften können in einer einzigen animation-Eigenschaft zusammengefasst werden.

/* animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction>; */
.mein-element {
  animation: pulse 1.5s ease-in-out 0s infinite normal;
}

3. Animationen auslösen (Trigger)

Standardmäßig startet eine Animation, sobald das Element auf der Seite geladen wird. Ein häufiger Anwendungsfall ist das Auslösen einer Animation bei einer Benutzerinteraktion, wie z.B. :hover.

.button {
  transition: transform 0.2s ease-out; /* Für den Rückzustand */
}

.button:hover {
  /* Startet die 'shake'-Animation nur bei Hover */
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

Fazit

CSS-Animationen sind ein mächtiges Werkzeug, um Webseiten lebendiger und interaktiver zu gestalten. Durch die Definition von @keyframes können komplexe Bewegungsabläufe erstellt werden, die allein mit CSS gesteuert werden und dabei performanter sind als die meisten JavaScript-basierten Animationsbibliotheken.