Denis Potschien 30. Oktober 2018

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 P0 gibt die Startposition der Kurve an. Die Richtung, die die Kurve einschlägt, wird  mit dem zweiten Punkt P1 definiert. Der dritte Punkt P2 gibt die zweite Richtung der Kurve an, die schließlich im vierten Punkt P3 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 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“ 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)

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Kann man mit dieser CSS3-Funktion Animationen auf einer Website darstellen, z. B. Temperaturmessungen, die von einem Sensor (in Echtzeit) eingespeist werden?

  2. … nur eine kleine Ergänzung: der IE versteht die Übergänge in seiner Version 10 – deswegen ist es sinnvoll zusätzlich die Angabe mit -ms-transition zu machen!

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.