Transizioni CSS3: la "transizione: tutti" è più lenta di "transizione: x"?

Question

Ho una domanda sulla velocità di rendering per la proprietà di transizione css3.

Supponiamo di avere una serie di elementi:

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} 

E 'molto più efficiente di indirizzare tutte le transizioni per tutti quegli elementi che utilizzano una sola dichiarazione div, span, a {transition: all}. Ma la mia domanda è: sarebbe "più veloce" in termini di fluidità e velocità del rendering dell'animazione per indirizzare la specifica proprietà di transizione di ogni elemento? Per esempio:

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} 

La mia logica nel chiedere questo è che se il css "motore" deve cercare "tutte" le proprietà di transizione, anche se non v'è solo una proprietà unica per un elemento, che potrebbe rallentare le cose .

Qualcuno sa se questo è il caso? Grazie!

Answer 1

Sì, utilizzando transition: all potrebbe causare gravi inconvenienti in termini di prestazioni. Ci possono essere molti casi in cui il browser dovrebbe apparire se ha bisogno di effettuare una transizione, anche se l'utente non lo vedrà, come le variazioni di colore, le dimensioni, ecc.

L'esempio più semplice che riesco a pensare è this: http://dabblet.com/gist/1657661 - prova a cambiare il livello di zoom o la dimensione del font e vedrai che tutto diventa animato. Naturalmente non ci potrebbero essere molte di queste interazioni utente, ma potrebbero esserci dei cambiamenti di interfaccia che possono causare il reflow e ridisegna in alcuni blocchi, che potrebbero dire al browser di provare e animare tali cambiamenti.

Quindi, in generale, è consigliabile che non utilizzerà il transition: all e usa le transizioni dirette, invece.

Ci sono alcune altre cose che possono andare storte con le transizioni all, come la spruzzata di animazione sul caricamento della pagina, dove dovrebbe inizialmente rendere gli stili iniziali per i blocchi e quindi applicare lo stile con un'animazione. In molti casi non sarebbe la cosa che vuoi :)

Answer 2

Sto usando all per i casi in cui ho avuto bisogno di animare più di una regola. Ad esempio, se volessi cambiare il color & background-color su :hover.

Ma si scopre che è possibile destinare più di una regola per le transizioni, in modo da non necessità di ricorrere all'impostazione all.

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