Przejścia CSS3: Czy „przejście: wszystko” jest wolniejsze niż „przejście: x”?

Mam pytanie dotyczące szybkości renderowania dla właściwości przejścia css3.

Załóżmy, że mam kilka elementów:

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}

O wiele bardziej efektywne jest kierowanie wszystkich przejść dla wszystkich tych elementów przy użyciu jednej deklaracji div, span, a {transition: all}. Ale moje pytanie brzmi: czy byłoby „szybsze” pod względem płynności i szybkości renderowania animacji, aby osiągnąć specyficzną właściwość przejścia każdego elementu? Na przykład:

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}

Moja logika polegająca na zadawaniu tego pytania jest taka, że ​​jeśli "silnik" css musi szukać "wszystkich" właściwości przejścia, nawet jeśli istnieje tylko jedna właściwość dla elementu, może to spowolnić działanie.

Czy ktoś wie, czy tak jest? Dzięki!

Tak, używanie transition: allmoże powodować poważne wady wydajności. Może istnieć wiele przypadków, w których przeglądarka będzie wyglądać, jeśli będzie musiała dokonać przejścia, nawet jeśli użytkownik go nie zobaczy, na przykład zmiany koloru, zmiany wymiarów itp.

Najprostszy przykład, jaki przychodzi mi do głowy, to: http://dabblet.com/gist/1657661 - spróbuj zmienić poziom powiększenia lub rozmiar czcionki, a zobaczysz, że wszystko staje się animowane. Oczywiście nie może być wiele takich interakcji użytkownika, ale mogą wystąpić pewne zmiany w interfejsie, które mogą spowodować ponowne wlanie i ponowne malowanie w niektórych blokach, co może nakłonić przeglądarkę do podjęcia próby animacji tych zmian.

Dlatego ogólnie zaleca się, aby nie używać transition: alli zamiast tego używać bezpośrednich przejść.

Jest kilka innych rzeczy, które mogą się nie udać z allprzejściami, na przykład animacja przy ładowaniu strony, w przypadku której najpierw renderowałoby początkowe style bloków, a następnie stosował je w animacji. W wielu przypadkach nie byłoby to coś, czego chcesz :)

Używałem allw przypadkach, w których potrzebowałem animować więcej niż jedną regułę. Na przykład, gdybym chciał zmienić color& background-coloron :hover.

Okazuje się jednak, że możesz kierować reklamy na więcej niż jedną regułę dla przejść, więc nigdy nie musisz uciekać się do tego allustawienia.

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