soy Kseso y esto EsCSS

Mover elementos con Css: Qué es mejor, translate o position (top/left) 20.12.12

A la hora de mover un elemento con Css hay dos opciones obvias para cambiar su posición: usar translate o los valores de posicionamiento (top, right, bottom, left). La cuestión entonces es: ¿cuál es mejor?

Mover elementos con Css: Qué es mejor, translate o position (top/left)

·Por Kseso ⧉ 20.12.12 ⚑ animation ⚑ transform ✎ 0

Lo que sigue es un extracto de dos artículos (ambos en inglés) aparecidos hoy día 20 que se adentran en esta cuestión analizando los dos métodos y exponiendo sus conclusiones:

Paul Irish Why moving elements with translate() is better than pos:abs top/left en su blog paulirish.com

A Tale of Animation Performance, artículo en css-tricks.com

Ya se que con este tipo de aviso soy un pesado, pero una vez más te lo recuerdo: visita los artículos originales. No te conformes con mi reseña.

Y para que no tengas ningún tipo de dudas ya te lo adelanto:
Usa translate en las animaciones Css para cambiar la ubicación de los elementos. Básicamente por:

Menor carga de trabajo para la CPU y navegador, que se traduce en:
- Página más dinámica.
- Animaciones más fluidas
- Animaciones con mejor apariencia visual.

Poniéndonos en situación

Tengamos un elemento al que queremos cambiar su colocación ya sea tras una acción del usuario (hacer :hover por ejemplo) o de forma "automática" con una animación (@keyframes)

Las dos opciones posibles que tenemos a mano con Css son:

Posicionarlo de forma absoluta o fija (para evitar interaciones con el resto) y cambiar los valores de su colocación: las propiedades top, right, left y/o left.
Utilizar la propiedad y valor transform: translate().

Las pruebas

Para estudiar comparando las dos opciones, ambos autores recurren en primer lugar a una animación simple:

Paul Irish: Animación con top/left.; Animación con trasnlate().
Chris Coyier: Animación usando top/left; Animación usando translate()

Y para analizar la carga de trabajo Paul Irish lo hace en base a una animación más compleja: Anima el macbook de joshua realizado con box-shadow sobre un fondo que es un gradiente Css:

Paul Irish: animación compleja: Macbook usando top/left; Macbook usando translate()

Los resultados:

En los dos aspectos: visual y el "esfuerzo o trabajo" que supone mover un elemento, la vía que sale ganadora es utilizando transform: translate() como ya te adelantaba.

En el caso de la carga al navegador/SO fíjate en la imagen precedente: la animación con top/left necesita mucho más tiempo para dibujar cada frame. Todo el Css, incluyendo las sombras, es computado por la CPU para realizar la composición sobre el gradiente en cada uno de los frames.
Usando translate, la CPU "mete" al macbook una capa propia (llamada RenderLayer), y es en esta capa en la que se desarrollan todos los cambios (las 2D transform, 3D transform e incluso la opacidad de las sombras). El resultado es una mayor rapidez y mejor ratio en cada @keyframe.

Corolario final

Paul Irish termina con unos consejos que me permito trasladar aquí:

Directrices para la animación

Usa CSS keyframe animation o CSS transitions siempre que te sea posible. El navegador puede optimizar el dibujado y la composición.
Si necesitas usar animaciones basadas en JS, usa requestAnimationFrame. Evita setTimeout, setInterval.
Evita, si puedes, cambiar los estilos en línea en cada fotograma (jQuery animate()-style). Las basadas en declaraciones Css pueden ser más y mejor obtimizadas por el navegador.
Utilizando transformaciones 2D en lugar de posicionamiento absoluto se obtienen mejores tasas de FPS en el renderizado y una animación más suave.

Créditos, atribuciones y reconocimiento:

Las imágenes que ilustran este artículo así como las pruebas y conclusiones las he obtenido de los artículos de Paul Irish y Chris Coyier que te enlazo al inicio del post.

Complementario

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.