Einer der wichtigsten Aspekte bei Animationen ist wohl die Animationskurve.
Deshalb liste ich hier die schönsten Bézier Kurven auf, die ich in den letzten Jahren benutzt habe.
01 Smooth Hover
Bézier-Kurve
cubic-bezier(.2, 0, .15, 1)
Geeigneter Einsatz
Hover-Elemente, die beim Hovern ihre Position verändern
Generell sich bewegende Elemente (z.B. Dropdown open/close, Sidebar open/close, usw.)
Smooth Hover im Einsatz
02 Snappy Curve
Bézier-Kurve
cubic-bezier(0, 0, .2, 1)
Geeigneter Einsatz
Hover-Elemente
Skalierende Elemente
Open/Close Elemente (Navigation, Dropdown, usw.)
Snappy Curve im Einsatz
03 Long Counter
Bézier-Kurve
cubic-bezier(.785, .325, .22, 1)
Geeigneter Einsatz
Zahlen-Counter
Lange und grosszügige Fade-In Elemente im Hintergrund (z.B. Maske eines Hintergrundbildes)
