transition-timing-function Werte veranschaulicht

An einem kleinem Beispiel möchte ich Werte der Eigenschaft „transition-timing-funktion“ veranschaulichen.

Bei einer transition gibt man den Start- und Endpunkt eines Eigenschaftswertes vor. So soll zum Beispiel die Schriftfarbe eines Paragraphen (p) von blau zu rot wechseln und zwar dann, und nur dann, wenn sich ein Benutzer mit der Maus über dem Paragrapen befindet. Die Berechnung des Überganges überlässt man dem Browser. Die Beschreibung der Start- und Endpunkte sehen dann in der CSS so aus:

p {
color: blue;
}

p:hover {
color: red;
}

Hä? Transition? Ohne Transition erhält man doch auch das, was man definiert hat. Ja! Dann noch 3 mal ja! Aber … Eine Transition nun soll den Übergang zwischen den beiden Zuständen animieren und flüssiger gestalten, um dem Benutzer ein besseres Gefühl beim Besuch der Webseite zu vermitteln. Ohne Transition ist es ein Wechsel, der ruckartig stattfindet. Mit einer Transition wird dieser Ruck abgefedert.


p {
color: blue;
transition: color 1s;
}

Die Eigenschaft transiton-timing-function beschreibt nun die Geschwindigkeit der Animationsberechnung und -ausführung während der Transformation, also auf dem Weg zwischen Start und Ende in der vorgegebenen Zeit (transition-duration).

Als mögliche Werte für diese Eigenschaft stehen ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier und steps zur Verfügung. Grundsätzlich sind dies Ausdrücke und Beschreibungen einer mathematischen Funktion, die der Browser zur Berechnung des Überganges verwendet. „Wie weit fortgeschritten ist der Übergang, die Transition zum Punkt x, 0,5, etc. .. “

  • ease: normaler Start, schneller Mittelteil, normales Ende
  • ease-in: langsam am Anfang, schnell am Ende
  • ease-out: schnell am Anfang, langsam am Ende
  • ease-in-out: langsamer Start und langsames Ende, im Mittelteil schneller
  • Linear: Geschwindigkeit gleichbleibend
  • steps(): in (definierten) Schritten, ruckartig
  • cubic-bezier: benutzerdefiniert nach (mathematischer) Bezier-Kurve

Bitte die Maus bei :hover gedückt halten, die Transition läuft auf :active !

ease

ease-in

ease-out

ease-in-out

linear

steps()

cubic

 

Eine tolle Darstellung der transition-timing-function findet mach auch unter