Animaciones con CSS3: Introducción


       Las animaciones en la web no son nada nuevo, basadas en javascript, y si usas alguna librería como Jquery son fáciles de conseguir. ¿Por qué usar entonces animaciones CSS? Pues porque el código de la animación se ejecutará nativamente en el navegador, cuyo código es compilado y está muy optimizado, mientras que javascript será siempre interpretado. Así que con CSS las animaciones serán más rápidas y eficientes.

       Una animación en CSS se disparará al poner o quitar una clase sobre un elemento. Normalmente cuando ponemos una clase a un elemento, el navegador sustituye los valores que tuviera por los de la nueva clase. Con una animación hace lo mismo, pero a lo largo del tiempo e interpolando valores intermedios.

       Partiendo de esta base necesitamos tener en cuenta 3 requisitos para cualquier animación:

  • Definir la animación, cuanto queremos que dure y función de interpolación.
  • Los atributos que queramos cambiar deben ser numéricos directa o indirectamente. Es decir que podemos animar un cambio de color, un cambio de posición, un giro, un desplazamiento,... pero no valores absolutos como el centrado de un texto o un cambio de una imagen por otra.
  • Debemos tener valores definidos para la propiedad antes y después de la animación, si el navegador no sabe desde que valor parte no puede interpolar (aunque demos por supuesto que cogerá el valor por defecto de la propiedad, no lo hace).

       Vamos a ver un ejemplo sencillo, hacer que una imagen gire 90º al pasar el puntero del ratón por encima. Empezamos con el código CSS para esta transformación, sin animación (basado en el código del artículo Como girar una imagen en CSS3):

#imagen{
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}

#imagen:hover{
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);
}


tictac




       La sintaxis básica de una animación es:

       transition: <propiedades a animar> <duración> <función de interpolación>

       Así que con el siguiente código estamos diciendo:

       transition: all 1s ease-in-out;

       Que queremos que anime todas las propiedades CSS disponibles, la animación será de 1 segundo y usará una función ease-in-out, es decir, más lenta al empezar y terminar que en el medio. Las funciones de animación que deberían poderse elegir son: ease, linear, ease-in, ease-out, ease-in-out. Hay más, pero no están soportadas por todos los navegadores, así que no las recomiendo todavía.

       Por ahora hay que utilizar prefijos propietarios para las animaciones, añado la versión sin prefijo, aunque todavía no la acepta ningún navegador. El código sería:
#imagen2{
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);

     -o-transition: all 1s ease-in-out;
     -ms-transition: all 1s ease-in-out;   
     -moz-transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}

#imagen2:hover{
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);
}



tictac





       También podemos especificar diferentes animaciones cuando el puntero entra y sale de la imagen, para la animación de salida, especificamos como es en la pseudo-clase :hover. Vamos a poner una animación de mitad de duración y lineal.

#imagen3{
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);

-o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}

#imagen3:hover{
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);

    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}


tictac






       Las animaciones están soportadas por firefox (5+), chrome (4+), safari (4+), Internet Explorer (10+), Android (4+ completo, aunque parcial anteriormente) y se espera que en Opera a partir de la versión 12. Lo bueno es que al ser solo decorativo, en navegadores antiguos, el cambio de la propiedad se hará igual, pero instantáneo, sin animación. Así que no tenemos que preocuparnos mucho por compatibilidad hacia atrás.