performance - animate - will change transform css
translate3d vs translate performance (3)
Como Cameron sugirió, translate3d debería ser más rápido en muchos navegadores, en su mayoría aquellos que utilizan la aceleración de hardware gfx para acelerar la representación. especialmente en webkit translate3d era la forma preferida de forzar la aceleración de hardware en los elementos de la página.
aunque en la experiencia mit, a veces hay un inconveniente en el uso de transformaciones 3d: en ciertas combinaciones de versiones de navegador / os (osx + safari te estoy mirando) la representación acelerada por hardware puede alterar ligeramente el suavizado de fuente y la interpolación, causando así un parpadeo menor difuminar. esas situaciones pueden ser resueltas, pero deben tenerse en cuenta.
Ahora todos sabemos, particularmente por ese buen artículo , que deberíamos preferir las transformaciones css a la posición animada.
Pero tenemos la opción entre translate() y translate3d() ...
¿Cuál es generalmente más rápido?
El uso de translate3d empuja las animaciones CSS en la aceleración de hardware. ¡Incluso si está buscando hacer una traducción básica en 2d, use translate3d para obtener más poder! ¡Así que ''T3d'' es mejor porque le dice a las animaciones CSS que empujen las animaciones en 3D! Por eso es más rápido. (La respuesta de Cameron Little es la prueba).
Este sitio a continuación ejecuta pruebas que comparan translate() , translate3d() y un par de otras propiedades. De acuerdo con ello, translate3d() es más rápido en la mayoría de los navegadores.