Ist ein CSS-Übergang für alle Elemente ein Performance-Problem?

Question

Ich dachte, es wäre eine nette Geste, meiner Website einige CSS-Übergänge hinzuzufügen, so dass der Hover die Ein-/Ausblendung beeinflusst. Ich war eine wirklich einfache Art und Weise zu denken, es zu tun unten mit dem Code wäre:

a, div, input, button{ 

    -webkit-transition: background .5s; 
    transition: background .5s; 
} 

, dass jede Änderung Hintergrund verblasst in/out machen würde. Natürlich hat nicht jedes a, div, input und button auf meiner Seite eine Hintergrundänderung beim Hover, so dass Sie keine Übergänge überall sehen werden. Aber ich habe mich gefragt, ob die Anwendung der Umstellung so umfangreich ist, dass Probleme bei der Browserleistung auftreten, insbesondere bei Telefonen.

Also was denkst du? Ist es in Ordnung wie oben zu implementieren? Oder sollte ich den Übergang nur auf bestimmte Elemente/Klassen anwenden, wo es angewendet wird?

Answer 1

Transitioning bestimmte Eigenschaften, wie left und margin bewirkt, dass der Browser Stile jeden Frame neu zu berechnen. Dies kann einer der wenigen Fälle sein, in denen die Leistung spürbar verbessert werden kann.

Abgesehen davon ist es ziemlich sicher, so viele zu verwenden, wie Sie möchten, aber als @SUJEET JAISWAL angegeben, stellen Sie einfach sicher, dass es nicht schlecht UX durch über Bord gehen zu schaffen.

Answer 2

Hinzufügen von Übergang/Animation auf Ihrer Website wird eine gewisse Überlastung zu Speicher und/oder CPU im Vergleich zu Plain-Site hinzufügen, aber in der Praxis habe ich nie CSS-Übergänge/Animation als Leistungsengpass gefunden. Sie können sie also so oft verwenden, wie Sie möchten.

Aber Sie sollten sie nur dort hinzufügen, wo es erforderlich ist. Wenn Sie sie unnötigerweise hinzufügen, kann dies zu einem schlechten UX führen.

CSS Animationen, CSS Transition und Javascript ist request() pausieren, wenn die aktuellen Registerkarte in den Hintergrund gedrängt werden.

Wenn Sie interessiert sind, sollten Sie read this article from MDN