Le Hollandais Volant#15583 - High Performance Animations - HTML5 Rocks
Pour les animations CSS, utilisez plutôt "transform: translate();" que "top/left". C’est beaucoup plus rapide et moins gourmand en ressources.
On parle d’environ 25% de temps CPU en moins dans le navigateur.
La raison à ça est que les top/left provoquent un reflow (recalcule de toutes les positions des éléments de la page) + un repaint (couleurs, etc.) des éléments.
Transform:translate ne provoque pas de reflow : c’est bien plus rapide.
Si on fait attention à ça, alors non seulement les animations seront plus fluides sur les écrans, et en plus ça consommera moins de batterie. Et ça marchera également mieux sur du matériel peu performant.
On parle d’environ 25% de temps CPU en moins dans le navigateur.
La raison à ça est que les top/left provoquent un reflow (recalcule de toutes les positions des éléments de la page) + un repaint (couleurs, etc.) des éléments.
Transform:translate ne provoque pas de reflow : c’est bien plus rapide.
Si on fait attention à ça, alors non seulement les animations seront plus fluides sur les écrans, et en plus ça consommera moins de batterie. Et ça marchera également mieux sur du matériel peu performant.