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)
2 Antworten zu „CSS-Transitions: Timing ist alles“
— was ist Deine Meinung?
Kann man mit dieser CSS3-Funktion Animationen auf einer Website darstellen, z. B. Temperaturmessungen, die von einem Sensor (in Echtzeit) eingespeist werden?
… 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!