Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 30. Oktober 2018

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 P0 gibt die Startposition der Kurve an. Die Richtung, die die Kurve ein­schlägt, wird  mit dem zwei­ten Punkt P1 defi­niert. Der drit­te Punkt P2 gibt die zwei­te Richtung der Kurve an, die schließ­lich im vier­ten Punkt P3 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 P1 (0,25/0,1) sowie für P2 (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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. Kann man mit die­ser CSS3-Funktion Animationen auf einer Website dar­stel­len, z. B. Temperaturmessungen, die von einem Sensor (in Echtzeit) ein­ge­speist wer­den?

  2. … nur eine klei­ne Ergänzung: der IE ver­steht die Übergänge in sei­ner Version 10 – des­we­gen ist es sinn­voll zusätz­lich die Angabe mit -ms-tran­si­ti­on zu machen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.