Animationen¶

Was sind CSS-Animationen?¶

Mit CSS können wir Elemente auf einer Webseite animieren, ohne dass JavaScript oder andere Programmiersprachen erforderlich sind. Animationen sind wichtig, weil sie:

Webseiten lebendiger und ansprechender machen
Aufmerksamkeit auf wichtige Inhalte lenken
Interaktionen für den Nutzer verbessern

CSS-Animationen bestehen aus zwei Hauptbestandteilen:

@keyframes: Definiert die Zustände, die das Element während der Animation durchlaufen soll.
animation-Eigenschaften: Steuern, wie die Animation abläuft (Dauer, Geschwindigkeit, Wiederholungen usw.).

@keyframes¶

Die @keyframes-Regel gibt an, wie sich ein Element während der Animation verändert.

Grundstruktur von @keyframes

@keyframes beispielAnimation {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200px);
  }
}

Erklärung:

@keyframes beispielAnimation: Erstellt eine neue Animation mit dem Namen beispielAnimation.
from: Der Startzustand der Animation (entspricht 0%).
to: Der Endzustand der Animation (entspricht 100%).

Die obige Animation bewegt ein Element von links nach rechts um 200 Pixel.
Diese Schreibweise kann auch mit Prozentwerten angegeben werden:

@keyframes beispielAnimation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

Beide Varianten haben dieselbe Wirkung.

Mehrere Animationsschritte mit Prozentwerten¶

Zusätzlich zu from und to können beliebig viele Zwischenstufen angeben werden.

@keyframes multiStepAnimation {
  0% {
    background-color: red;
    width: 100px;
  }
  25% {
    background-color: blue;
    width: 150px;
  }
  50% {
    background-color: green;
    width: 200px;
  }
  75% {
    background-color: yellow;
    width: 150px;
  }
  100% {
    background-color: red;
    width: 100px;
  }
}

Ergebnis: Das Quadrat wechselt viermal die Farbe und Größe, bevor es zurück zum Startpunkt kommt.

Wann benutze ich from und to vs. Prozentwerte?

Methode	Anwendung
`from` / `to`	Einfache Animationen mit nur einer Start- und Endposition
`0% – 100%`	Komplexere Animationen mit mehreren Zwischenstufen

animation-Eigenschaften¶

animation-name¶

Diese Eigenschaft gibt an, welche @keyframes-Animation mit welchem Element verwendet werden soll.

Mögliche Werte:

Wert	Bedeutung
`none`	Keine Animation wird angewendet.
`animName`	Eine Animation mit dem Namen `animName` wird abgespielt.

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

.box {
  animation-name: fadeIn;
  animation-duration: 5s;
}

Ergebnis: Das Element wird innerhalt von 5 Sekunden eingeblendet.

animation-duration¶

Legt fest, wie lange die Animation vom Anfang bis zum Ende dauert.

Mögliche Werte:

Wert	Bedeutung
`0s`	Die Animation dauert 0 Sekunden (wird sofort beendet).
`2s`	Die Animation dauert 2 Sekunden.
`500ms`	Die Animation dauert 500 Millisekunden.

Beispiel:

@keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  animation-name: move;
  animation-duration: 3s;
}

Ergebnis: Das Element bewegt sich über 3 Sekunden nach rechts.

animation-timing-function¶

Steuert, wie die Geschwindigkeit der Animation variiert.

Mögliche Werte:

Wert	Bedeutung
`linear`	Gleichmäßige Geschwindigkeit.
`ease`	Langsamer Start und langsames Ende (Standardwert).
`ease-in`	Langsamer Start, dann schneller.
`ease-out`	Schneller Start, dann langsames Ende.
`ease-in-out`	Langsamer Start und langsames Ende.

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}

.box {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

Ergebnis: Das Element bewegt sich nach oben, startet langsam, wird schneller und endet langsam.

animation-delay¶

Legt fest, wie lange die Animation nach dem Laden verzögert wird.

Mögliche Werte:

Wert	Bedeutung
`0s`	Animation startet sofort.
`2s`	Animation startet nach 2 Sekunden.

Beispiel:

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

.box {
  animation-name: fadeOut;
  animation-duration: 3s;
  animation-delay: 2s;
}

Ergebnis: Das Element bleibt 2 Sekunden sichtbar, bevor es langsam verschwindet.

animation-iteration-count¶

Legt fest, wie oft die Animation abgespielt wird.

Mögliche Werte:

Wert	Bedeutung
`1`	Die Animation wird einmal abgespielt.
`2`	Die Animation wird zweimal abgespielt.
`infinite`	Die Animation läuft unendlich oft.

Beispiel mit infinite:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.box {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Ergebnis: Das Element dreht sich unendlich oft.

animation-direction¶

Bestimmt, ob die Animation vorwärts, rückwärts oder in beide Richtungen läuft.

Mögliche Werte:

Wert	Bedeutung
`normal`	Läuft in eine Richtung (Standard).
`reverse`	Läuft rückwärts.
`alternate`	Wechselt bei jedem Durchlauf die Richtung.
`alternate-reverse`	Läuft erst rückwärts, dann vorwärts.

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.box {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Ergebnis: Das Element dreht immer wieder in die andere Richtung.

animation¶

Alle Animationseigenschaften können in einer Zeile geschrieben werden:

.box {
  animation: spin 2s ease-in-out infinite alternate;
}

Das ist das gleiche wie:

.box {
  animation-name: spin;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Was kann innerhalb von @keyframes geändert werden?¶

Bewegung (transform)

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

Größe (width, height, scale)

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

Farbe (background-color, color)

@keyframes colorChange {
  0% {
    color: red;
  }
  100% {
    color: blue;
  }
}

Transparenz (opacity)

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

Komplette Animation mit mehreren Effekten¶

Hier kombinieren wir Bewegung, Rotation, Skalierung und Farbänderung in einer Animation:

@keyframes fancyAnimation {
  0% {
    transform: rotate(0deg) scale(1);
    background-color: red;
  }
  50% {
    transform: rotate(180deg) scale(1.5);
    background-color: blue;
  }
  100% {
    transform: rotate(360deg) scale(1);
    background-color: green;
  }
}

.box {
  width: 100px;
  height: 100px;
  position: relative;
  animation: fancyAnimation 3s ease-in-out infinite alternate;
}

Ergebnis: Das Quadrat dreht sich, wächst und ändert die Farbe.