CSS- oder JavaScript-Übergänge

Benutzerdefinierte Transitions geben entweder eine css-Funktion (GPU) oder eine tick-Funktion (JS-gesteuert pro Frame) zurück.

Für transform, opacity, color – also alles, was CSS animieren kann. CSS läuft für 60 fps auf dem Compositor.

Für Textänderungen, Canvas-Pixel oder andere Eigenschaften, die nicht von CSS unterstützt werden.

tick läuft in JavaScript bei jedem Animations-Frame. Das ist aufwendiger als CSS.

Manche Transitions können CSS für die Darstellung und tick für gelegentliche Aktualisierungen verwenden, die nicht mit CSS möglich sind.

CSS-Animationen werden universell unterstützt; tick ist als JavaScript stets verfügbar.

Beide Ansätze berücksichtigen prefers-reduced-motion, wenn Sie dies innerhalb Ihrer Transition prüfen.

Verwenden Sie den Performance-Tab, um CSS- und tick-Implementierungen zu vergleichen.

Wenn CSS den Effekt nicht umsetzen kann, wechseln Sie kontrolliert zu tick.

Mehrere Elemente mit unterschiedlichen Transitions können in derselben Ansicht CSS und tick kombinieren.

Verwenden Sie standardmäßig CSS. Greifen Sie nur dann auf tick zurück, wenn CSS die Animation tatsächlich nicht ausdrücken kann.

Wann sollten Sie die css-Funktion in einer Transition bevorzugen?

Wählen Sie css für GPU-beschleunigte Transitions und reservieren Sie tick für Animationen, die nicht mit CSS möglich sind, etwa Text- oder Canvas-Änderungen.