CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstellen. Dabei beeinflusst du den zeitlichen Ablauf deiner Animation recht komfortabel. Unter Verwendung der Eigenschaft „transition-timing-function“ definierst du unterschiedliche Abläufe – mit und ohne Beschleunigung.

Beschleunigen und abbremsen

Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise beschleunigen und abbremsen. Die Standardeinstellung für eine Animation ist „ease“. Sie sorgt für einen langsamen Start der Animation mit Beschleunigung zur Mitte und anschließendem Abbremsen zum Ende hin.

Neben der einfachen „ease“-Beschleunigung gibt es weitere Varianten. Der Wert „ease-in“ sorgt für einen langsamen Start der Animation, die dann linear fortgesetzt wird. Bei „ease-out“ wird die Animation linear gestartet, am Ende erfolgt ein Abbremsen der Animation.

Zu guter Letzt sorgt der Wert „ease-in-out“ für einen langsamen Start mit nachfolgender Beschleunigung und Abbremsen am Ende der Animation.

Individueller Ablauf

Statt auf vorgegebene Abläufe mit den genannten „ease“-Werten zurückzugreifen, kannst du Animationsabläufe auch individuell festlegen. Hierzu dient die Einstellung „cubic-bezier“. Wie der Name zutreffend vermuten lässt, wird hierbei eine Bézierkurve angegeben, die den zeitlichen Ablauf der Animation definiert. Eine Bézierkurve definierst du über verschieden viele Punkte. Die kubische Bezierkurve, die hier verwendet wird, habe ich über vier Punkte definiert.

Bezíerkurven aller vorgegebenen Werte für die Timing Function

Der erste Punkt P₀ gibt die Startposition der Kurve an. Die Richtung, die die Kurve einschlägt, wird  mit dem zweiten Punkt P₁ definiert. Der dritte Punkt P₂ gibt die zweite Richtung der Kurve an, die schließlich im vierten Punkt P₃ mündet. Zur Definition einer Bézierkurve für den Animationsablauf werden lediglich die beiden Richtungen angegeben. Der Startpunkt liegt immer bei 0/0 und der Endpunkt immer bei 1/1.

Vier Punkte einer kubischen Bézierkurve

Einen individuellen Ablauf definierst du beispielsweise so:

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Die resultierende Kurve entspricht dem Verhalten des Wertes „ease“.  Angegeben sind die Werte für P₁ (0,25/0,1) sowie für P₂ (0,25/1).

Der Wert „ease-in-out“ stellt sich als Bézierkurve wie folgt dar:

transition-timing-function: cubic-bezier(0.42, 0.1, 0.58, 1);

Mit „cubic-bezier“ lassen sich also ganz unterschiedliche Beschleunigungs- und Abbremsverhalten festlegen. Mit der „Maximaleinstellung“ für eine kubische Bézierkurve erhältst du eine Animation, die nach dem Start stark abbremst, sich linear weiterbewegt und anschließend zum Ende stark beschleunigt:

transition-timing-function: cubic-bezier(0, 1, 1, 0);

Individuelle Bézierkurve

Derzeit unterstützen alle Browser mit Ausnahme des Internet Explorer CSS-Transitions und auch die Eigenschaft „transition-timing-function“.

Fazit: Gerade das individuelle Anlegen von Bézierkurven für Animationsabläufe ist eine schöne Sache, um jenseits der Standardwerte eigene Vorstellungen zu verwirklichen. Dabei ist die Verwendung relativ einfach.

(Artikelbild: Depositphotos)