* { transition: all ... et CPU

Bonjour,
Je suis en train de mettre en place un effet des effets de transition sur mon site et plus j'en ajoute et plus cela alourdie la feuille de style (mais plus c’est beau ! .

Aussi pour simplifier cela j’ai mis en place un :

* { 
-webkit-transition:  all 0.7s ease-in-out;
-moz-transition:  all 0.7s ease-in-out;
-o-transition:  all 0.7s ease-in-out;
-ms-transition:  all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

Cela fonctionne parfaitement bien, hormis que j’ai l’impression que cela consomme beaucoup de CPU. Je l’entends au ventilo de l’ordinateur qui se met à tourner à plein régime. Du coup j’aimerai bien votre avis sur la question. Je me pose également la question des terminaux mobile, cela ne risque-t-il pas de mouliner encore plus ? Je signale au passage que mon ordinateur est sous-ventilé et qu’il lui arrive souvent de s’emballer dès que j’ai un peu trop d’applis ouvertes.

Merci !

Bonjour,

Aurais-tu une URL pour que l'on test ? ( juste comme ça )

Je pense qu'il y a moyen de chauffer un appart en hiver avec cette technique CSS, j'adore

Bon #Vendredÿ à part, effectivement une url serait sympa qu'on voit ce qu'il se passe. Ton ordi est très vieux ?

En fait dans l'absolu je pense pas trop que ce soit le sélecteur * qui tue ton CPU, mais plus le fait d'utiliser des transitions qui risquent pour certaines de taper dans l'accélération matérielle.

idsquare > Viens pas troller toi
---
Bonjour,

Transition sur tous les éléments, ça risque pas d'être léééégèrement lourd graphiquement ?

Pour constater ce qu'en pense un navigateur très optimisé en la matière, tu peux tester sur Chrome (Canary tant qu'à faire, la version beta) et dans les DevTools (F12), afficher "Show paint rectangles" (en bas dans l'onglet Rendering qui suit Console, Search et Emulation).
C'est ce que Chrome a besoin de réafficher.

FPS meter et peut-être potential scroll bottlenecks te permettront aussi de comparer avec/sans * { transition }
Modifié par Felipe (25 Apr 2014 - 15:28)

Merci ! Je n'ai pas d'url, j'ai peur d’embêter les ventilos des visiteurs Donc en local uniquement pour mes essais.

L'effet et bien sympa lors que l'on redimensionne la fenêtre (site responsive), plutôt que de faire des paliers 'brutaux', les transition font que les polices change de taille progressivement, les éléments (div) se déplacent etc ... bref c'est très joli mais ça fait mouliner la CPU. Vous pouvez tester sur vos sites, vous allez voir, c'est waou !

J'ai vu sur un blog US que je ne suis pas le seul a penser que c'est pas top pour la CPU et donc pas recommandé. Du coup je suis reparti sur des transitions sur des éléments ciblés : a, input, textarea, div transparent etc ... et en ciblant juste les attribut dont j'ai besoin (background, border, color, opacity ..) plus de 'all'. Et mon ventilo se calme. (mon ordi est récent mais c'est un dell

Le seul intérêt de cette méthode c'est sur site responsive, lors du resize de la fenêtre. Donc finalement plutôt super-flux.