CSS Transition: So erzeugen Sie einfache Interaktionen

Wer heute eine Website besucht, erwartet Interaktion, Bewegung und Animation. Die Zeit starrer Homepages, auf denen sich nichts regt, sind vorbei. Um im Hintergrund solche Interaktionen und Bewegungsmuster umzusetzen, sind verschiedene Befehle nötig. Einer davon ist CSS Transition.

Was sind CSS Transitions?

CSS steht für Cascading Style Sheets und ist eine sogenannte Style Sheet Language, mit der Sie das Aussehen und Layout einer Website definieren können. Innerhalb der Stylesheet-Sprache gibt es verschiedene Funktionen – eine davon ist Transition. Damit legen Sie fest, wie ein CSS-Element in das nächste übergeht. In anderen Worten: Sie definieren eine Animation oder Interaktion.

Die CSS-Eigenschaft Transition fasst mehrere Einzelangaben zusammen. Zu diesen zählen:

• Transition Property
• Transition Duration
• Transition Timing Function
• Transition Delay

Anhand der Namen können Sie vielleicht bereits ahnen, was sich dahinter verbirgt. Mit den einzelnen Zeilen beziehungsweise Befehlen bekommt ein Element seine Eigenschaften. Wir gehen im Folgenden auf jede Einzelangabe gesondert ein.

CSS Transition Property als Herzstück der Animation

Die CSS Transition Property ist der Kern einer Animation – und neben der Duration eine der beiden Pflichtangaben, damit die Transition ausgeführt werden kann. Sie gibt an, welche CSS-Eigenschaft animiert werden soll, und ermöglicht die Definition mehrerer Eigenschaften für komplexe Animationen.

Sie können so beispielsweise Breite, Höhe oder Farbe einer Schaltfläche animieren, um Effekte zu erzielen. Um eine CSS Transition zu erstellen, müssen Sie zunächst die Eigenschaft angeben, die animiert werden soll. Der dazugehörige CSS-Codeschnipsel sieht zum Beispiel wie folgt aus:

In diesem Schnipsel soll die Breite (width) einer Schaltfläche (button) animiert werden. Es ist ebenfalls möglich, mehrere Eigenschaften gleichzeitig zu animieren. Trennen Sie diese dafür durch Kommata im Code:

Anstatt nur der Breite werden jetzt auch die Höhe (height) und Hintergrundfarbe (background-color) des Buttons animiert.

CSS Transition Duration steuert die Animationsdauer

Neben der Property gibt es mit der Duration (Dauer) eine zweite Pflichtkomponente, damit die CSS Transition erfolgreich wird. Mit der CSS Transition Duration können Sie die Animationsdauer angeben, in Sekunden (s) oder Millisekunden (ms).

Nehmen Sie einen längeren Zeitraum, ergibt das sanfte und langsame Animationen. Wer für die Interaktionen lieber die schnelle und dynamische Variante bevorzugt, wählt eine kurze Duration.

Die Transition Duration wird im Code einfach unterhalb der Property eingefügt. Wir bleiben im ersten Beispiel, in dem wir nur die Höhe animieren. Sie können wie im zweiten Beispiel auch gleichzeitig weitere Eigenschaften mit einer Dauer versehen:

Die Animation der Breite dauert in diesem Beispiel also eine halbe Sekunde.

Ease-in, Ease-out, Linear: Verschiedene Bewegungsmuster

Das Bewegungsmuster Ihrer Animation beeinflusst ebenfalls die Wirkung beim Nutzer oder der Nutzerin. Hier gibt es drei primäre Muster:

1. Ease-in: Langsamer Start und schnelles Ende der Animation
2. Ease-out: Schneller Start und langsames Ende
3. Linear: Gleichmäßige Geschwindigkeit über die gesamte Dauer

Diese Muster können Sie innerhalb der CSS Transition Timing Function festlegen, die wir im nächsten Absatz vorstellen.

CSS Transition Timing Function: Kontrolle über das Bewegungsmuster

Die CSS Transition Timing Function bestimmt, wie die Animation abläuft. Mit den vordefinierten Werten wie Ease, Linear, Ease-in, Ease-out und Ease-in-out – alternativ auch durch eigene Bézierkurven – können Sie das Bewegungsmuster Ihrer Animation flexibel steuern.

Im Codeschnipsel sieht das beispielsweise wie folgt aus:

In unserem Beispiel wird die Animation der Breite Ihres Buttons mit einem langsamen Start und schnellem Ende (Ease-in) zu sehen sein.

CSS Transition Delay zum Verzögern einer Animation

Es ist ein beliebtes Stilmittel auf Websites, eine Animation erst nach einer gewissen Zeit starten zu lassen. Auch das können Sie abbilden – mit der CSS Transition Delay Funktion. Legen Sie die Verzögerung in Sekunden (s) oder Millisekunden (ms) fest, bevor die Animation beginnt.

Das kommt vor allem dann zum Einsatz, wenn Sie beispielsweise mehrere Animationen nacheinander abspielen oder eine Animation starten möchten, nachdem Nutzerinnen und Nutzer eine Aktion ausgeführt haben.

Um eine Verzögerung für Ihre Animation hinzuzufügen, erweitern Sie Ihren Code wie folgt:

Bedeutet übersetzt für unser Beispiel: Die Breitenanimation startet nach einer Verzögerung von einer Sekunde.

Animation wie von Zauberhand mit CSS Transition Hover

Eine CSS Transition ist besonders spannend, wenn sie in Kombination mit Hover-Effekten eingesetzt wird. Sie kennen das bestimmt: Wenn Sie auf einer Website über einen Button oder ein Bild fahren, startet erst dann eine Animation.

Mit dieser Funktion lassen sich Schaltflächen, Links und andere Elemente animieren, wenn der Benutzer oder die Benutzerin mit der Maus drübergeht – der Hover-Effekt trägt zu einer tollen User Experience bei.

Um einen Hover-Effekt mit CSS Transitions zu erstellen, definieren Sie die gewünschten Stiländerungen innerhalb der :hover-Pseudoklasse. Im folgenden Codeschnipsel greifen wir eines der ersten Beispiele auf, das sowohl Höhe und Breite als auch die Hintergrundfarbe animiert:

In diesem Beispiel ändern sich die Breite, Höhe und Hintergrundfarbe der Schaltfläche, wenn Sie mit der Maus über den Button fahren. Die Breitenanimation beginnt nach einer Sekunde und dauert eine halbe Sekunde mit einem Ease-in. In der Höhe beginnt die Animation nach einer halben Sekunde und dauert eine Sekunde mit einem Ease-out. Die CSS-Animation der Hintergrundfarbe beginnt schon nach 0,1 Sekunden, dauert aber dann fünf Sekunden in linearer Geschwindigkeit.

Sie sehen: Mit CSS-Grundlagen wie CSS Transition lassen sich komplett flexibel Animationen erstellen, die Interaktion einfach machen.

Fazit: CSS Transition für bessere Interaktionen

CSS Transition bietet eine einfache und effektive Möglichkeit, Interaktionen auf Ihrer Webseite mit der Style-Sheet-Sprache zu gestalten. Durch die Kombination von Property, Duration, Timing Function, Delay und Hover entstehen so Animationen, die interaktiv sind und Besuchenden der Website ein abwechslungsreiches Erlebnis ermöglichen. Begeistern Sie Ihre User mit CSS Transition!

Titelbild: Arif Riyant / Unsplash