CSS-Übergänge vs. Federanimationen in der UI
Vergleichen Sie CSS-Übergänge mit physikbasierter Federanimation: feste Dauern, Unterbrechbarkeit, Schwungübernahme und Ausführungsleistung.
Kernaussage
CSS-Übergänge bilden Fortschritt über eine vorgegebene Zeitspanne mittels Bézier-Kurven ab und eignen sich hervorragend für einfache, nicht-interaktive Einblendungen wie Tooltips. Federanimationen berechnen Positionen Bild für Bild anhand von Steifigkeit, Dämpfung und Masse, sodass Gesten mitten im Ablauf unterbrechbar bleiben und Schwung beibehalten. Nutzen Sie CSS für starre Abläufe und Federn für gestengesteuerte Oberflächen.
Feste Dauer vs. physikalisches Einpendeln
Ein CSS-Übergang benötigt eine feste Zeitangabe wie 300 ms. Unabhängig davon, wie weit das Element wandert oder wie schnell der Nutzer gewischt hat, dauert die Bewegung stets exakt 300 ms. Eine Federanimation hingegen kommt natürlich zum Stillstand, sobald die simulierten Kräfte abklingen.
Das Unterbrechungsproblem in realen UIs
Die größte Schwäche von CSS-Übergängen zeigt sich bei schnellen Zustandswechseln. Klickt ein Nutzer doppelt auf einen Button oder wechselt beim Ziehen eines Panels die Richtung, springt der CSS-Übergang abrupt um. Federphysik federt Unterbrechungen organisch ab, indem der aktuelle Geschwindigkeitsvektor ohne visuelle Hänger nahtlos weitergeführt wird.
- CSS-Übergänge springen oder stocken bei plötzlicher Unterbrechung
- Federn übernehmen Geschwindigkeit und lenken Schwung stufenlos um
- Federn ersparen manuelle Zeitanpassungen an unterschiedliche Bildschirmgrößen
- CSS bleibt ressourcenschonender, wenn keine Gestenverfolgung nötig ist
Performance und Ausführung außerhalb des Haupt-Threads
CSS-Übergänge auf transform und opacity laufen im GPU-Kompositor des Browsers außerhalb des JavaScript-Haupt-Threads. JavaScript-Federn laufen auf requestAnimationFrame, sofern sie nicht als CSS linear()-Approximation oder über optimierte native Runtimes wie ExodeUI betrieben werden.
Entscheidungsmatrix: Was sollten Sie wählen?
Für statische Zustandswechsel wie Link-Unterstreichungen beim Hovern oder einfache Transparenz-Einblendungen ist CSS optimal. Für Wischmenüs, wegwerfbare Karten, Kippschalter und alle mit dem Finger berührten Elemente sind Federn für echte Wertigkeit unverzichtbar.
Wichtige Prinzipien
- Nutzen Sie CSS-Übergänge für kurze, vorhersehbare optische Einblendungen
- Setzen Sie Federphysik ein, sobald Nutzergesten oder Unterbrechungen möglich sind
- Federn verhindern unpassendes Timing bei unterschiedlichen Distanzen
- Beide Varianten sollten strikt nur transform und opacity animieren