web-dev-qa-db-fra.com

Transitions CSS3: "transition: all" est-elle plus lente que "transition: x"?

J'ai une question sur la vitesse de rendu de 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 à l'aide d'une seule déclaration div, span, a {transition: all}. Mais ma question est: serait-il "plus rapide" en termes de fluidité et de rapidité du rendu d'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!

performancecsscss-transitions
80
HandiworkNYC.com

Oui, en utilisant transition: all pourrait entraîner des inconvénients majeurs dans les performances. Il peut y avoir beaucoup de cas où le navigateur chercherait s'il a besoin de faire une transition, même si l'utilisateur ne le verra pas, comme les changements de couleur, les changements de dimension, etc.

L'exemple le plus simple auquel je peux penser est le suivant: 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. Bien sûr, il ne pouvait pas y avoir beaucoup de telles interactions avec les utilisateurs, mais il pourrait y avoir des changements d'interface qui peuvent provoquer la refusion et des repeints dans certains blocs, qui pourraient dire au navigateur d'essayer d'animer ces changements.

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

Il y a d'autres choses qui peuvent mal tourner avec les transitions all, comme le splash d'animation au chargement de la page, où il rendrait d'abord les styles initiaux pour les blocs, puis appliquait le style avec une animation. Dans de nombreux cas, ce ne serait pas la chose que vous voulez :)

62
kizu

J'ai utilisé all pour les cas où j'avais besoin d'animer plus d'une règle. Par exemple, si je voulais changer le color & background-color sur :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 au paramètre all.

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