CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstel­len. Dabei beein­flusst du den zeit­li­chen Ablauf dei­ner Animation recht kom­for­ta­bel. Unter Verwendung der Eigenschaft „tran­si­ti­on-timing-func­tion“ defi­nierst du unter­schied­li­che Abläufe – mit und ohne Beschleunigung.

Beschleunigen und abbremsen

Neben der Einstellung „line­ar“, bei der eine Animation kon­ti­nu­ier­lich die­sel­be Geschwindigkeit hat, las­sen sich Animationen auf unter­schied­li­che Weise beschleu­ni­gen und abbrem­sen. Die Standardeinstellung für eine Animation ist „ease“. Sie sorgt für einen lang­sa­men Start der Animation mit Beschleunigung zur Mitte und anschlie­ßen­dem Abbremsen zum Ende hin.

Neben der ein­fa­chen „ease“-Beschleunigung gibt es wei­te­re Varianten. Der Wert „ease-in“ sorgt für einen lang­sa­men Start der Animation, die dann line­ar fort­ge­setzt wird. Bei “ease-out” wird die Animation line­ar gestar­tet, am Ende erfolgt ein Abbremsen der Animation.

Zu guter Letzt sorgt der Wert „ease-in-out“ für einen lang­sa­men Start mit nach­fol­gen­der Beschleunigung und Abbremsen am Ende der Animation.

Individueller Ablauf

Statt auf vor­ge­ge­be­ne Abläufe mit den genann­ten „ease“-Werten zurück­zu­grei­fen, kannst du Animationsabläufe auch indi­vi­du­ell fest­le­gen. Hierzu dient die Einstellung „cubic-bezier“. Wie der Name zutref­fend ver­mu­ten lässt, wird hier­bei eine Bézierkurve ange­ge­ben, die den zeit­li­chen Ablauf der Animation defi­niert. Eine Bézierkurve defi­nierst du über ver­schie­den vie­le Punkte. Die kubi­sche Bezierkurve, die hier ver­wen­det wird, habe ich über vier Punkte defi­niert.

Bezíerkurven aller vor­ge­ge­be­nen Werte für die Timing Function

Der ers­te Punkt P₀ gibt die Startposition der Kurve an. Die Richtung, die die Kurve ein­schlägt, wird  mit dem zwei­ten Punkt P₁ defi­niert. Der drit­te Punkt P₂ gibt die zwei­te Richtung der Kurve an, die schließ­lich im vier­ten Punkt P₃ mün­det. Zur Definition einer Bézierkurve für den Animationsablauf wer­den ledig­lich die bei­den Richtungen ange­ge­ben. Der Startpunkt liegt immer bei 0/0 und der Endpunkt immer bei 1/1.

Vier Punkte einer kubi­schen Bézierkurve

Einen indi­vi­du­el­len Ablauf defi­nierst du bei­spiels­wei­se so:

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

Die resul­tie­ren­de Kurve ent­spricht 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“ las­sen sich also ganz unter­schied­li­che Beschleunigungs- und Abbremsverhalten fest­le­gen. Mit der „Maximaleinstellung“ für eine kubi­sche Bézierkurve erhältst du eine Animation, die nach dem Start stark abbremst, sich line­ar wei­ter­be­wegt und anschlie­ßend zum Ende stark beschleu­nigt:

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

Individuelle Bézierkurve

Derzeit unter­stüt­zen alle Browser mit Ausnahme des Internet Explorer CSS-Transitions und auch die Eigenschaft „tran­si­ti­on-timing-func­tion“.

Fazit: Gerade das indi­vi­du­el­le Anlegen von Bézierkurven für Animationsabläufe ist eine schö­ne Sache, um jen­seits der Standardwerte eige­ne Vorstellungen zu ver­wirk­li­chen. Dabei ist die Verwendung rela­tiv ein­fach.

(Artikelbild: Depositphotos)