Por qué transiciones para algunas propiedades CSS son lentos y ninguno fluidez

Question

pasé un combate de 4 horas en tener una transición sencilla con un rendimiento aceptable:

Primero trató este código:

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

El resultado fue terribles en Chrome y Firefox v21.0.1180.89 v15.0.1, pero fue muy bien en IE10. Capturé el uso de CPU y el gráfico de uso de GPU y encontré que Chrome no usa GPU para las propiedades básicas de CSS, ¿Cuál es la solución para los navegadores modernos?

Answer 1

Como resultado de mis 4 horas experimentos es mejor utilizar transformada, como a continuación:

 -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; 

Esto fue muy bien en IE10, Chrome y Firefox v21.0.1180.89 v15.0.1.

Nota: IE9 no soporta tarnsforms

Answer 2

No utilice izquierda o superior, inferior, margen o propiedades de relleno para mover los elementos, pero sólo "transformar: traducir".

De la misma manera, al cambiar el tamaño de los elementos utilizan sólo "transformar: escala" en lugar de altura o anchura.

Las propiedades izquierda, superior, inferior, margen, relleno, altura, ancho (y muchas otras) obligan al navegador a volver a calcular todo el diseño, por lo que la geometría de muchos elementos, con una gran cantidad de CPU.

Cada propiedad tiene un peso diferente, en este artículo se explica claramente high performance animations

Edit1: triggers.com parece que hay una buena página si no se recuerda cada peso de propiedad