CSS3 Transitions: «transition: all» est-il plus lent que «transition: x»?

J’ai une question sur la vitesse de rendu pour la propriété de transition css3.

Supposons que j’ai un certain nombre d’éléments:

div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} 

Il est beaucoup plus efficace de cibler toutes les transitions pour tous ces éléments en utilisant une déclaration div, span, a {transition: all} . Mais ma question est la suivante: serait-il “plus rapide” en termes de finesse et de rapidité du rendu de l’animation pour cibler la propriété de transition spécifique de chaque élément? Par exemple:

 div {margin: 2px; transition: margin .2s ease-in} span {opacity: .5; transition: opacity .2s ease-in} a {background-position: left top; transition: background .2s ease-in} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} 

Ma logique en demandant ceci est que si le “moteur” CSS doit rechercher “toutes” les propriétés de transition, même s’il n’y a qu’une seule propriété pour un élément, cela pourrait ralentir les choses.

Est-ce que quelqu’un sait si c’est le cas? Merci!

Oui, en utilisant la transition: all pourrait causer des inconvénients majeurs dans les performances. Il peut y avoir beaucoup de cas où le navigateur aurait besoin de faire une transition, même si l’utilisateur ne le voit pas, comme les changements de couleur, les changements de dimension, etc.

L’exemple le plus simple auquel je puisse penser est celui-ci: http://dabblet.com/gist/1657661 – essayez de changer le niveau de zoom ou la taille de la police et vous verrez que tout s’anime. Beaucoup d’interactions avec ces utilisateurs, mais il peut y avoir des changements d’interface qui peuvent provoquer la redissortingbution et le repositionnement dans certains blocs, ce qui peut amener le navigateur à essayer d’animer ces modifications.

Donc, en général, il est recommandé de ne pas utiliser la transition: all et utilisera plutôt les transitions directes.

Il y a d’autres choses qui peuvent mal se passer avec all transitions, comme l’éclaboussure de l’animation sur le chargement de la page, où les styles initiaux des blocs seraient d’abord rendus, puis appliqués au style avec une animation. Dans beaucoup de cas, ce ne serait pas la chose que vous voulez 🙂

J’ai utilisé all pour les cas où je devais animer plus d’une règle. Par exemple, si je voulais changer la color et la color background-color :hover .

Mais il s’avère que vous pouvez cibler plus d’une règle pour les transitions, vous n’avez donc jamais besoin de recourir à all parameters.

 .nav a { transition: color .2s, text-shadow .2s; }