Animation Timing – Ablauf
Wird ein Ball hingegen angetreten, nimmt er sofort schnelle Fahrt auf und rollt langsam aus. 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)}
}
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.
- ease
- Vorgabe, start etwas langsamer, beschleunigt, klingt langsam ab,
- linear
- Konstante Geschwindigkeit über die gesamte Animation, wirkt mechanisch,
- ease-in
- startet langsam und beschleunigt gegen Ende der Animation,
- ease-out
- startet schnell und läuft gegen Ende der Animation weich aus,
- ease-in-out
- startet langsam, beschleunigt in der Mitte der Animation und bremst wieder gegen Ende der Animation, ähnlich wie ease, aber dramatischer.
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.
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.
