# CSS Transitions & Animations

# Transitions

Mit der Pseudo-Class :hover kannst du beschreiben, was mit einem HTML-Element passieren soll, wenn man darüberfährt mit dem Cursor. Bei folgendem Button wird die Hintergrundfarbe verändert.

<a class="button" href="https://duckduckgo.com">
  Ich bin ein Button
</a>

.button {
  background-color: royalblue;
  color: white;
  border-radius: 0.5rem;
}

.button:hover {
  background-color: orange;
}

Ergebnis

Ich bin ein Button

Du siehst, dass die Änderung sofort da ist und es keine Verzögerung zwischen dem Ändern der Hintergrundfarbe gibt. Mit der Property transition kannst du zwischen Properties animieren. Dabei wird auf der ursprünglichen Class .button folgendes definiert:

.button {
  background-color: royalblue;
  color: white;
  border-radius: 0.5rem;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.button:hover {
  background-color: orange;
}

Ergebnis

Fahre über den Button und schau dir an, wie die background-color innerhalb von 1 Sekunde von royalblue zu orange animiert wird.

Ich bin ein Button

Du kannst auch mehrere Properties unabhängig voneinander animieren. Dabei musst du sichergehen, dass du die Values mit einem Komma trennst und die richtige Reihenfolge einhältst. Möchtest du alle Properties animieren, dann kannst du transition-property: all; schreiben.

.button {
  background-color: royalblue;
  color: white;
  border-radius: 0.5rem;
  transition-property: background-color, color;
  transition-duration: 1s, 0.5s;
  transition-timing-function: linear;
}

.button:hover {
  background-color: orange;
  color: black;
}

Ergebnis

Hier wird die background-color innerhalb von 1 Sekunde von royalblue zu orange animiert. Die Schriftfarbe color wird innerhalb von 0.25 Sekunden von white zu black animiert.

Ich bin ein Button

# Animations

Animations erfordern im Vergleich zu Transitions keine Interaktion, wie zum Beispiel durch ein :hover mit dem Cursor. Bei Animationen beschreibst du ein Set von Properties, welche zu einem anderen Set an Properties animiert werden sollen. Das kannst du dir wie ein Daumenkino vorstellen. Jedes Blatt in diesem Daumenkino heisst in CSS keyframe. In deinem Selektor referenzierst du dann den Animationsname deiner @keyframes und sagst diesem Selektor, wie die Animation abgespielt werden soll.

Im folgenden Beispiel möchten wir ein Quadrat pulsieren lassen und die Farbe von royalblue zu orange changieren.

/* Zuerst wird die Animation definiert… */

@keyframes pulsierendesQuadrat {
  0% { /* Anfangszustand */
    transform: scale(0.7); /* 70% seiner Originalgrösse */
    background-color: royalblue;
  }
  100% { /* Endzustand */
    transform: scale(1);
    background-color: orange;
  }
}

/* …dann wird die Animation zugewiesen. */

.quadrat {
  height: 5rem;
  width: 5rem;
  animation-name: pulsierendesQuadrat;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; 
  animation-direction: alternate;
}

<div class="quadrat"></div>

Ergebnis

Durch die Property animation-timing-function: ease-in-out; wirkt das Quadrat so als würde es “atmen”, da die Animation unterschiedlich schnell abgespielt wird. Eine immer gleichmässige Animation wäre mit der Value linear zu erreichen. Mit diesen Timing Functions kannst du Animationen realistisch wirken lassen. In den weiterführenden Links findest du Cheat Sheets, aus denen du Values kopieren kannst, um dich vertrauter mit Timing Functions zu machen.

Damit die Animation endlos abgespielt wird, musst du animation-iteration-count: infinite; definieren. Soll die Animation nur 3-mal abgespielt werden, dann schreibst du animation-iteration-count: 3;.

Mit animation-direction: alternate; definierst du, dass der Endzustand (100%) wieder zurückanimiert auf den Anfangszustand (0%). Sonst würde die Animation nach Erreichen des Endzustandes ruckartig auf den Anfangszustand zurückspringen. In unserem Beispiel würde das Quadrat schlagartig kleiner werden und die Farbe ändern.

Weiterführende Links

Deutschsprachige Dokumentation zur animation-Property (selfhtml.org)
Easing Functions Cheat Sheet (easings.net)
Archiv für möglich Übergangseffekte mit animation-timing-function und transition-timing-function
Animista - Beispiele mit Vorschau und Code

Passende Challenges

#20 CSS Animations (Füge eine Animation mit CSS ein die niemals stoppt und unabhängig von einer Nutzerinteraktion funktioniert)

← Detailseiten Section Contact →