Dlaczego przejścia dla niektórych właściwości CSS są powolne i żaden biegły

Question

Spędziłem atak 4 godzin od posiadania prostego przejścia z dopuszczalnym wydajność:

Najpierw próbowałem ten kod:

left: 2000px; 
-webkit-transition: left 1s linear; 
-moz-transition: left 1s linear; 
-ms-transition: left 1s linear; 

wynik był okropne na Chrome v21.0.1180.89 i FireFox v15.0.1, ale było świetne na IE10. Przechwyciłem zużycie procesora i wykres wykorzystania GPU i odkryłem, że chrome nie używa GPU dla podstawowych właściwości css, Jakie jest rozwiązanie dla nowoczesnych przeglądarek?

Answer 1

W rezultacie moje 4 godziny eksperymenty lepiej jest użyć przekształcać jak poniżej:

 -webkit-transform: translate(2000px, 0); 
     -webkit-transition: -webkit-transform 1s linear; 
     -moz-transform: translate(2000px, 0); 
     -moz-transition: -moz-transform 1s linear; 
     -ms-transform: translate(2000px, 0); 
     -ms-transition: -ms-transform 1s linear; 

To było świetne na IE10, v21.0.1180.89 Chrome i FireFox v15.0.1.

Uwaga: IE9 nie obsługuje tarnsforms

Answer 2

Nie używaj lewej lub góra, dół, margines lub właściwości wypełniające, aby przenieść elementy, ale tylko „transform: tłumaczyć”.

W ten sam sposób, aby zmienić rozmiar elementów, użyj tylko "transform: scale" zamiast height lub width.

Właściwości lewej, górnej, dolnej, marginesowej, wypełnienia, wysokości, szerokości (i wielu innych) zmuszają przeglądarkę do ponownego obliczenia całego układu, a więc geometrii wielu elementów, z dużą ilością pracy procesora.

Każda nieruchomość ma inną wagę, w tym artykule to jasno wyjaśnione high performance animations

Edit1: triggers.com wydaje się być dobrą stronę, jeśli nie pamiętam każdej z wag z właścicielem