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).

@keyframes animationOne {
  0% {
    opacity:1;
    transform: translate(0,30px) rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
    box-shadow: 1px 1px 5px rgba(50,65,66,0.9); }
  50% {
    transform: translate(120px,110px) scaleX(1.2) scaleY(1.2) ;
    box-shadow: 0px 0px 60px rgba(50,65,66,0.5); }
  100% {
    opacity:1;
    transform: translate(300px,150px) rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
    box-shadow: 1px 1px 5px rgba(50,65,66,0.9); }
}
@keyframes animationTwo {
  0% {
    top:220px;
    left:30px;
    opacity:1;
    transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
    box-shadow: 1px 1px 5px rgba(50,65,66,0.9); }
  50% {
    top:300px;
    left:150px;
    transform: scaleX(1.2) scaleY(1.2) ;
    box-shadow: 0px 0px 60px rgba(50,65,66,0.5); }
  100% {
    top:340px;
    left:330px;
    opacity:1;
    transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
    box-shadow: 1px 1px 5px rgba(50,65,66,0.9); }
}

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

Esta entrada tiene 0 comentarios

Deja un comentario

Usted debe loguearse para dejar un comentario.