programador

iván albizu

Main Blog

Blog

Animaciones CSS3 – transform: translate (x, y) vs left(x) top(y)

Animación con CSS3

Es cierto que hacer una animación variando por ejemplo atributos en vertical (top) y en horizontal (left) es una práctica común, pero puede mejorar la animación usando otro método. Si usamos “transform: translate (x, y)“. Usando translate hay que dar las unidades entre paréntesis del desplazamiento en horizontal primero y vertical segundo. Aunque mejor será verlo en un ejemplo:

texto moviéndose modificando
translate (X, Y)
texto moviéndose modificando
atributos top y left

 

Quizá no sea muy notable la diferencia, pero todo lo que se pueda mejorar una animación sin costar mucho tiempo, merece la pena. Hay otras propiedades, según he ido leyendo y no probado por mi mismo, que también se mejoran usando “transform”. Dejo el código de las dos animaciones (sin añadir los “vendor” para todos los navegadores).

Conforme descubra mejoras en las animaciones con CSS3 y merezcan la pena, las iré publicando.

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.