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:

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);
margin-left: auto;
margin-right: auto;
}

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

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

transition: <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);

}

#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;

}