Animaciones con CSS3

Las animaciones realizadas con CSS3 lentamente se abren paso en remplazo de Javascript, cierto es que con ellas no podemos lograr animaciones demasiado complejas, ni tampoco podemos esperar que funcionen en navegadores obsoletos como Internet Explorer, incluso no estoy seguro de que funcionen correctamente en la versión 10, que pocos tienen a la hora de escribir esta publicación.

Para implementar una animación con CSS3 tenemos que usar las funciones CSS3 animation y @keyframes. La sintaxis de las mismas no tiene muchas complicaciones, en el caso de animation se trata de la llamada corta, pudiendo, usando las llamadas individuales, definir todos los parámetros de la animación por separado; personalmente prefiero ésta versión por que ocupa mucho menos código. Veamos un ejemplo súper sencillo, un CD que cuando le pasamos el mouse por arriba gira utilizando la función CSS3 transform : rotate.

cd


El código es el siguiente:

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
          #img-cd:hover{ 
              animation:rotate 400ms ease-out 0s infinite normal; 
          } 
          @keyframes rotate {
               from { transform: rotate(0deg); } 
               to { transform: rotate(360deg); } 
          }
</style>
 
<style type="text/css">
          #img-cd:hover{ 
              animation:rotate 400ms ease-out 0s infinite normal; 
          } 
          @keyframes rotate {
               from { transform: rotate(0deg); } 
               to { transform: rotate(360deg); } 
          }
</style>
1
2
3
4
5
 
<div style="margin: 0 auto; width: 200px; height: 100px; text-align: center;">
      <img id="img-cd" alt="cd" src="http://inspirandolaweb.com/tutoriales/css/animacion-CSS3/imagenes/cd.png" /><br>
         Pasar el Mouse por Encima
</div>
 
<div style="margin: 0 auto; width: 200px; height: 100px; text-align: center;">
      <img id="img-cd" alt="cd" src="http://inspirandolaweb.com/tutoriales/css/animacion-CSS3/imagenes/cd.png" /><br>
         Pasar el Mouse por Encima
</div>

Primero que nada tenemos los estilos que hacen que la animación funcione y luego una div que tiene como único propósito alinear la imagen, que se encuentran dentro de ella, al centro. En este caso la animación se produce sobre la imagen, por lo que ésta debe estar identificada con un ID, para este ejemplo la llame “img-cd”. En el CSS nos encontramos que dentro de las propiedades de la imagen (#img-cd:hover) en estado hover (o sea con el mouse encima) tenemos la propiedad animation. Como ya mencione antes para que la animación funcione se necesitan dos funciones CSS3, la primera es animation y la segunda es @Keyframes. La sintaxis de la primera es la siguiente:

animation: (nombre de la función @keyframes) (duración) (efecto ease o lineal) (retraso en la ejecución) (cantidad de reproducciones) (dirección)

Explicando un poco más los parámetros animation:

  1. Nombre del @Keyframes (más abajo se explica).
  2. Duración de la animación.
  3. Efecto en la velocidad de la animación:
    •  lineal: La animación es pareja de principio a fin.
    •  ease: Comienza lento, acelera y finaliza lento.
    •  ease-in: Comienza lento.
    •  ease-out: Finaliza lento.
    •  ease-in-out: Comienza y Finaliza lento.
  4. Espera antes de comenzar la animación.
  5. Cantidad de veces que se ejecuta la animación, pudiendo elegir infinite.
  6. La dirección cambia el sentido en que se ejecuta la animación pudiendo ser:
    • normal: La animación comienza y termina, y si se repite lo hace desde el principio hasta el final.
    • alternate: La animación comienza y termina, y si se repite lo hace desde el final hasta el principio, y alterna entre ambos.

Ejemplos:

  • animation: NombreKeyf 3s ease 1s infinite alternate;
  • animation: OtroNombre 500ms lineal 0s 2 normal;
  • animation: miAnimacion 1s ease-in 5s 1 alternate;
  • animation: otraAnimacion 100ms ease-out 0s infinite normal;

Mas abajo tenemos @keyframes rotate, la palabra rotate es el nombre que le di a la animación por lo que puede se cualquiera, este nombre es el que pasamos como primer parámetro a la función animation. En @Keyframes es donde definimos las alteraciones que va a sufrir el elemento a animar, teniendo un principio (from) y un final (to), si queremos definir alteraciones en otro punto de la animación, como en la mitad o en cualquier otra parte, lo podemos hacer añadiendo el porcentaje de la animación en la que queremos que ocurra, por ejemplo 75%{  }, donde dentro de los corchetes iría la acción (código CSS) sobre el elemento. Veamos un ejemplo sobre esta animación:

1
2
3
4
5
6
7
 @keyframes rotate {
               from { transform: rotate(0deg); }
               25%{transform:rotate(90deg);}
               50%{transform:rotate(-90deg);}
               75%{transform:rotate(270deg);}
               to { transform: rotate(360deg); } 
 }
 @keyframes rotate {
               from { transform: rotate(0deg); }
               25%{transform:rotate(90deg);}
               50%{transform:rotate(-90deg);}
               75%{transform:rotate(270deg);}
               to { transform: rotate(360deg); } 
 }

Al agregar estas nuevas acciones el resultado quedaría así (pasa el mouse por encima):

cd

Para que el efecto se notase correctamente aumente la duración a 4 segundos, y se puede ver como el CD rota 90 grados horarios, luego rota 90 grados anti-horarios (partiendo desde los 0 grados), luego va a los 270 grados horarios y finalmente llega a los 360 grados donde comienza de nuevo, los grados siempre son relativos a los 0 grados, por lo que no se suman.

En este ejemplo se utiliza la propiedad transform : rotate, pero se puede utilizar cualquier otra propiedad siempre y cuando sea aplicable al elemento. Si quieres más ejemplos los puedes ver aquí, o descargar ese mismo archivo para mirar el código aquí.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario