CSS Animation Easing

CSS animation easing: Animierter Farbroller

Das Easing in CSS-Animationen bestimmt das Anlaufen (Beschleunigung) und Auslaufen (Bremsen) des Objekts. Natürliche Bewegungen wie der Start eines Läufers beginnen mit einer kleinen Verzögerung, der Anlauf braucht Kraft, dann kommt die Bewegung in Fahrt.

Wird hingegen ein Ball angetreten, nimmt er sofort schnelle Fahrt auf und rollt langsam aus.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Animation Timing – Ablauf

Abruppte Bewegungen wie der Wechsel von einer Farbe auf die nächste beim Hovern über einen Button empfinden wir als mechanisch oder künstlich.

Das gilt für den rollenden Ball, für das langsame Anlaufen eines Zuges, laufenden Menschen und genauso für animierte Elemente der Navigation.

#beachball {
	margin: 2em auto;
	animation: rollon 4s alternate infinite ;
}

@keyframes rollon {
	to { transform: translateX(200%) rotate(359deg)}
}
Ball

Easing ändert die Dauer der Animation nicht, sondern packt mehr oder weniger Animationsschritte in eine Zeiteinheit.

CSS Easing – Bewegungsmuster

Animationen mit CSS bringen die Eigenschaft »animation-timing« – als easing (Entspannung) bezeichnet – mit, die für organische Bewegungen der animierten Objekte sorgt.

easeVorgabe, start etwas langsamer, beschleunigt, klingt langsam ab,
linearKonstante Geschwindigkeit über die gesamte Animation, wirkt mechanisch,
ease-instartet langsam und beschleunigt gegen Ende der Animation,
ease-outstartet schnell und läuft gegen Ende der Animation weich aus,
ease-in-outstartet langsam, beschleunigt in der Mitte der Animation und bremst wieder gegen Ende der Animation, ähnlich wie ease, aber dramatischer.
CSS timing-Funktionen
Bewegungsmuster: ease-in, ease-out, ease, ease-in-out und linear

Die Bewegungsmuster könnten auch als cubic-bezier(0.42,0,1,1) für ease-in, cubic-bezier(0,0,0.58,1) für ease-out usw. geschrieben werden, aber Namen ease-… sind eingängiger.

cubic-bezier

Die Cubic-Bezier-Funktion legt ein individuelles Verhalten mit vier Werten P0(x1 y1) und P1(x1 y1) fest, den Kontrollpunkten einer Bezierkurve. P0 setzt den Startwert, P1 den Endwert.

Kontrollpunkte
Ist das nicht dieselbe Kurve wie »ease-in-out«? Ja: ease-in-out ist auch eine kubische Bezier-Funktion.

Die Kontrollpunkte müssen nicht auf der horizontalen Achse (Zeit) liegen.

In den weichen Funktionen ease, ease-in, ease-out und ease-in-out liegen die Werte zwischen 0 und 1. In der cubic-bezier-Funktion können sie aber auch kleiner als 0 und größer als 1 sein. Dann kann das Objekt über den Endpunkt der Animation hinauslaufen oder die Funktion erzielt eine Art Abpralleffekt (bouncing).

Mobile Geräte mit Touchoberfläche? Cubic-Bezier-App in eigenem Fenster öffnen

x1 kann nicht kleiner werden als 0, x2 nicht größer als 1, aber y kann kleiner als Null und größer als 1 werden. Dann bewegt sich das Objekt am Anfang bzw. Ende der Bewegung über den Start / Endpunkt hinaus.