CSS transitions & Hover-Effekte: animierte Übergänge

Worum geht´s?

In diesem Tutorial werden wir uns animierte Übergänge in CSS ansehen – der Fachbegriff dafür wäre CSS transitions. Weil man sie so vergleichsweise einfach sichtbar machen kann, schauen wir uns dabei gleich noch Hover-Effekte an.

1. Was bedeutet CSS hover?

Der :hover-Selektor wird an einen anderen CSS-Selektor wie z.B. #div1 direkt drangehängt, und löst nur dann aus, wenn der Website-Besucher mit der Maus über das entsprechende Element fährt. Verlässt der Mauszeiger das Element wieder, verschwinden die CSS-Befehle, die über den :hover-Selektor ausgelöst worden sind, wieder.

1.1 Wie du einfache CSS hover anwendest

Die folgenden CSS-Selektoren würden z.B. das DIV #div1, das normalerweise eine grüne Hintergrundfarbe hat, beim darüberfahren auf rot umschalten:

#div1 {
  background-color: green;
}

#div1:hover {
  background-color: red;
}

Statt #div1 kannst du natürlich auch jeden anderen CSS-Selektor wie z.B. Klassen und HTML-Tags wie h1 verwenden.

Was aber, wenn wir z.B. ein Kind-Element verändern willst, wenn du über das Eltern-Element fährst?

1.2 Wie du Kind-Elemente des Elements veränderst, über das der Mauszeiger fährt

Nehmen wir an, in unserem #div1 befindet sich im HTML-Code noch ein weiteres DIV namens #div2.

Das #div1 ist in diesem Fall das Eltern-Element, das #div2 das Kind-Element (weil sich #div2 innerhalb von #div1 befindet).

Der folgende Code verändert die Hintergrundfarbe des Kind-Elements #div2, wenn wir mit der Maus über #div1 fahren:

#div1:hover #div2 {
  background-color: red;
}

Verlässt du das Eltern-Element #div1 mit der Maus, verliert #div2 wieder seine rote Hintergrundfarbe.

Das gleiche Prinzip kannst du auch über mehrere Hierarchie-Ebenen anwenden, also z.B. so:

ul li:hover ul li {
  color: blue;
}

In diesem Fall werden bei einem hover über einem li-Element die li-Elemente, die sich noch tiefer in einem ul-Element befinden, verändert.

2. Übergänge animieren mit CSS transitions

Über CSS transitions kannst du bestimmen, wie der Übergang zwischen bestimmten CSS-Zuständen passieren soll.

Unser hover von vorhin hat zwar funktioniert (die Farben änderten sich tatsächlich), aber der Übergang war sofort und ohne Übergang.

Mit Hilfe von CSS Transitions können wir diese Übergänge fließender gestalten und animieren. Statt einem „Springen“ von grün auf rot sieht der Website-Besucher dann einen fließenden Übergang von grün auf rot.

Netterweise sind diese Übergänge sehr simpel einzufügen. Wir müssen nur einige Dinge angeben:

• Was animiert werden soll
• Wie lange der Übergang dauern soll
• Welche Art des Übergangs

Hier ein Beispiel zum Starten:

#div1 {
  background-color: green;
  transition: all 0.2s ease-in;
}
#div1:hover {
  background-color: red;
}

Schauen wir uns die einzelnen Werte rechts von unserem transition: mal im Detail an:

2.1 Worauf sollen CSS transitions angewendet werden?

Der einfachste Wert ist „all“ – animiere alle Veränderungen, die das durch den CSS-Selektor ausgewählte HTML-Element betreffen.

Alternativ kann man hier z.B. „color“ schreiben, um nur eine Animation für Textfarben-Veränderung zuzulassen.

2.2 Wie lange sollen CSS transitions dauern?

Der nächste Wert ist vermutlich relativ selbsterklärend.

Das „s“ steht für Sekunden, und die Zahl davor steht für die Zeit, die die Animation dauern soll.

In unserem Fall dauert die Animation beispielsweise 0.2 Sekunden.

2.3 Welche Art der CSS transitions soll es sein?

Dieser Teil ist etwas komplizierter zu erklären, weil im Hintergrund mathematische Funktionen stehen.

Aber kurz gesagt gibt es hier z.B. den Wert „linear“, was für eine gleichförmige Animation mit immer gleicher Geschwindigkeit steht.

Einige Alternativen:

• ease-in: Langsamerer Anfang, dann gleichmäßige Geschwindigkeit
• ease-out: Langsamerer Schluss, sonst gleichmäßige Geschwindigkeit
• ease-in-out: Langsamer Anfang und Schluss, dazwischen gleichmäßige Geschwindigkeit

Wer sich total reinsteigern will, kann über die mathematische Funktion einer Bezier-Kurve noch exakter bestimmen, wie die Animation aussehen soll.

Aber die meisten von uns werden wohl meist eher bei den vorgefertigten Varianten bleiben.

3. Welche CSS-Befehle können mit CSS transitions animiert werden?

Wer jetzt überglücklich alles drunter und drüber animieren will, wird feststellen, dass nicht alles animiert werden kann.

3.1 Was mit CSS transitions animiert werden kann (kleine Auswahl):

• width
• height
• color
• background-color
• border (Farbe und Größe – die Art des borders wie solid oder dashed funktioniert nicht)
• margin
• padding
• border-radius
• opacity
• top, left, right, bottom (wenn position: relative|absolute|fixed ist)

3.2 Was mit CSS transitions nicht animiert werden kann

• display
• Die Art des borders (dashed, solid, double, …)

Im Grunde kann alles, was keinen Verlauf an Werten hat, nicht vernünftig animiert werden.

3.3 Die häufigsten Fehler bei CSS transitions mit hover

3.3.1 Fehler 1: Das Bild flackert seltsam herum

Wenn du mit :hover arbeitest und irgendwelche Größen, Abstände oder Positionen basierend auf dem hover änderst, kann es sein, dass das Element nach der Veränderung nicht mehr unter dem Mauszeiger ist. Dann springt es ziemlich seltsam herum.

Die Lösung ist darauf zu achten, dass das Element, das die Veränderung auslöst, nicht „unter dem Mauszeiger wegrutscht“.

3.3.2 Fehler 2: Das HTML-Element ist trotz korrekter CSS transition nicht animiert

Der zweite Standard-Fehler ist es, zwar die transition korrekt eingefügt zu haben und z.B. eine hover transition mit einem Zielwert zu haben, aber keinen Startwert.

Im folgenden Beispiel z.B. weiß der Browser nicht, von wo aus er auf die 600px width vom hover kommen soll, weil ursprünglich keine width eingestellt ist:

#div1 {
  background-color: green;
  transition: all 0.2s ease-in;
}

#div1:hover {
  width: 600px;
}

Die Veränderung passiert zwar, aber nicht animiert.

Damit die transition auch korrekt animiert, müssen wir dem #div1 noch einen Start-Wert für width geben:

#div1 {
  background-color: green;
  width: 400px;
  transition: all 0.2s ease-in;
}

#div1:hover {
  width: 600px;
}

Dann funktionierts 🙂

Diskussion zum Tutorial