Übergänge

Was sind Transitions?

Mit CSS-Transitions (Übergängen) können bei Änderungen von Eigenschaften von Elementen Zwischenzustände für einen fließenden Übergang interpoliert werden. Dazu kann auch die Übergangsdauer, die Übergangsfunktion und die Verzögerung, mit welcher der Übergang beginnen soll, angegeben werden.

CSS-Eigenschaft „transition-property“

Mit der CSS-Eigenschaft „transition-property“ kann die Eigenschaft angegeben werden, für die ein Übergang interpoliert werden soll. Dabei können auch mehrere Eigenschaften durch Komma getrennt angegeben werden:

CSS-Datei:

HTML-Datei:

Ergebnis:

Ohne "transition"
Mit "transition"

Hinweis: Ohne Angabe einer Dauer für den Übergang geht ein Element sofort ohne erkennbaren Übergang in seinen neuen Zustand über!

CSS-Eigenschaft „transition-duration“

Mit der CSS-Eigenschaft „transition-duration“ kann die Dauer des Übergangs angegeben werden. Bei der Verwendung von mehreren Eigenschaften für den Übergang, können auch mehrere Werte für die Dauer durch Komma getrennt angegeben werden:

CSS-Datei:

HTML-Datei:

Ergebnis:

Ohne "transition"
Mit "transition"

CSS-Eigenschaft „transition-timing-function“

Mit der CSS-Eigenschaft „transition-timing-function“ kann die Art und Weise (Funktion) des Übergangs angeben werden. Dabei sind folgende Werte möglich:

  • linear: gleichbleibende Geschwindigkeit
  • ease: langsamer beschleunigen und enden
  • ease-in: langsamer startend
  • ease-out: langsamer endend
  • ease-in-out: langsamer startend und endend

Auch für die Übergangs-Funktion können bei Verwendung mehrerer Eigenschaften für den Übergang, mehrere Werte durch Komma getrennt angegeben werden:

CSS-Datei:

HTML-Datei:

Ergebnis:

Ohne "transition"
Mit "transition"

CSS-Eigenschaft „transition-delay“

Mit der CSS-Eigenschaft „transition-delay“ kann der Start eines Übergangs um eine definierbare Zeit verzögert werden:

CSS-Datei:

HTML-Datei:

Ergebnis:

Ohne "transition"
Mit "transition"

Shorthand-Property „transition“

Mit der Shorthand-Property „transition“ können die zuvor beschriebenen Eigenschaften in folgender Reihenfolge angegeben werden:

  1. transition-property
  2. transition-duration
  3. transition-delay
  4. transition-timing-function

CSS-Datei:

HTML-Datei:

Ergebnis:

Ohne "transition"
Mit "transition"

Weitere Möglichkeiten

Es können auch unterschiedliche Definitionen für den Übergang hin zu den neuen Eigenschaftswerten und zurück zu den vorherigen Eigenschaftswerten festgelegt werden. Die Definitionen für den Übergang zurück werden dabei in der Deklaration für die neuen Eigenschaftswerte angegeben:

CSS-Datei:

HTML-Datei:

Ergebnis:

Soll ein ganzer Satz von Eigenschaften bei einem Übergang verwendet und gleich behandelt werden, kann das Schlüsselwort „all“ verwendet werden:

CSS-Datei:

HTML-Datei:

Ergebnis:

Hinweis: Sollen mehrere Transformationen in einer Transition verwendet werden, müssen diese in einer Definition ohne Komma hintereinander geschrieben werden!

Abschlussübung

Als Abschlussübung kannst du die Abschlussübung aus dem Kapitel „3D-Transformationen“ kopieren und um einen Übergang erweitern:


Gehe dabei wie folgt vor:

  • Kopiere die CSS- und HTML-Datei der Abschlussübung aus dem Kapitel „3D-Transformationen“
  • Erweitere die Klassen für die einzelnen Themen um einen Übergang der alle Eigenschaften beinhaltet („all“), 1 Sekunde dauert und langsam anfängt und aufhört
  • Setze die Höhe auf „0“ und die Rotation in X-Richtung auf 90 Grad, damit die nicht markierten Themen vollständig ausgeblendet werden
  • Verweise in der HTML-Datei im „link“-Element auf die neue CSS-Datei
  • Verweise im ersten Link des Menüs („HOME“) auf die neue HTML-Datei

Die Lösung kannst du dir zur Kontrolle hier herunterladen:

Download
Transitions8.css
Cascading Style Sheet Datei 893 Bytes
Download
Transitions8.html
HTML Dokument 1.7 KB

Quellen