De una manera parecida a las transiciones, pero con una mayor potencialidad, en HTML5 tenemos a nuestra disposición las animaciones (animation).
Para empezar con algo sencillo, primero vamos a hacer paso a paso que el martillo (creado en SVG) -y que ya hemos utilizado en otros temas- gire al colocar el cursor encima.
Sitúa el cursor encima del martillo para ver la animación.
Paso a paso
1. Creamos el objeto a animar
Primero, creamos dentro de un <div> el objeto, imagen o texto que realizará la animación (en este caso, el martillo).
Así, dentro de la página html, creamos un <div> llamado martillo y dentro creamos un dibujo SVG del martillo que rotará.
Seguidamente, en el código CSS, vamos a incluir dos cosas.
Por una parte, en el selector del <div> donde está el martillo, indicamos qué animación tendrá que reproducir, indicando un nombre y la duración de la animación expresada en segundos (entre otras propiedades opcionales que a continuación veremos).
#martillo {
animation:animacion_martillo 2s;
}
El nombre de la animación (animación_martillo) y la duración (2s) son valores obligatorios, pero existen valores opcionales que nos permiten personalizar la animación, como son:
animation-timing-function : Define el tipo de (easing) aceleración que tendrá la animación.
linear: la velocidad es siempre la misma durante toda la animación. ease: la animación comienza lenta, después rápida y acaba lento. ease-in: (aceleración) la animación empieza lenta y va acelerándose progresivamente. ease-out: (deceleración) la animación empieza rápida y va decelerando progresivamente. ease-in-out: la animación empieza y acaba lenta y en el recorrido central va rápida.
animation-iteration-count: Indica el número de veces que se repetirá la animación.
infinite: la animación se repite indefinidamente. número de repeticiones: se repite el número de veces indicado (por defecto es 1).
animation-direction: Establece la dirección de la animación.
normal: la animación se reproduce siempre tal y como la hemos definido. alternate: primero se reproduce en la dirección definida y posteriormente al revés (y así sucesivamente).
animation-delay: Indica si existe retardo (o tiempo de espera) para que se inicie la animación.
número de segundos de espera: El número de segundos seguido de "s".
animation-fill-mode: Indica cómo se quedará el elemento que realiza la animación cuándo ésta finalice.
none: Al acabar la animación se aplicarán los estilos CSS normales que tenga el propio elemento animado. forwards: Cuando acabe la animación, el elemento se quedará tal y como acabó la animación (especificadas en el 100%). backwards : Al finalizar la animación, el elemento animado se quedará con las propiedades con las que empezó la animación (especificadas en el 0%).
Así, el ejemplo anterior podría estar complementado por estas propiedades:
(Se podría escribir todo seguido, pero debido al número de valores y al orden existente para definirlos, posiblemente es más sencillo ir indicando las propiedades opcionales por separado):
Igualmente, dentro del mismo código CSS, definimos en qué consistirá dicha animación, indicando el nombre 'animacion_martillo', que hemos creado en el paso anterior.
Toda la animación se puede dividir en tantos pasos como sea necesario, aunque lo mínimo son 2: inicio (0%) y final (100%).
En este ejemplo se han incluido 3 pasos. En el inicio de la animación (0%) se empieza con una rotación del <div> martillo de 0 grados (0deg), en la mitad de la animación (50%), el <div> martillo tendrá una rotación de 90 grados (rotará hacia la derecha) y cuando la animación finalice (100%), el martillo volverá a su rotación inicial.
Ejemplo práctico complejo
El siguiente ejemplo es bastante más complejo, ya que se relacionan 2 animaciones, además de mejorar un poco la animación del martillo para que gire de una manera algo más natural y clave el clavo.
Al mismo tiempo, se ha utilizado el parámetro opcional infinite para que la animación se realice de manera cíclica.
Primero, vamos a mejorar un poco el movimiento del martillo.
Como habrás podido observar (al comparar este movimiento con el ejemplo del principio de este tema) el movimiento de este martillo, aparte de rotar se desplaza hacia abajo para poder llegar hasta el clavo (no se limita a rotar desde su eje central).
Además, al impactar contra el clavo permanece un poco más de tiempo rotado (no sube tan rápidamente).
Para solucionar el primer aspecto hemos añadido el código rojo:
Siempre que utilizemos las propiedades -top-, -left- o -right- debemos indicar si la posición que estamos indicando es absoluta (toma como referencia las coordenadas de la página html) o relativa (toma como referencia la posición donde está colocado el objeto, en este caso el <div> del martillo), por lo que tenemos que añadir también otra línea de código en el otro apartado del CSS:
En el caso del primer código, hemos añadido la propiedad top (que define la posición vertical de un elemento) para que cuando la animación llegue a su 50% de reproducción (a parte de girar 90 grados) también baje 57 píxeles. Al haber indicado position:relative le estamos definiendo que tiene que bajar 57 píxeles respecto a la posición relativa del <div> martillo, no de la página.
Pero con esto arreglamos el problema de que el martillo rotase de una manera más natural, pero no el hecho de que al impactar contra el clavo, éste se quede un rato más prolongado en la posición girada.
Para solucionar este problema vamos a realizar dos acciones. Primero, vamos a añadir un paso más a los tres que ya teníamos (quedando en cuatro pasos y modificando un poco los porcentajes centrales):
Ahora, el martillo acaba de girar cuando la animación llega al 42% de su recorrido (no en el 50% como antes) y hasta el 60% no vuelve a subir (antes empezaba a subir inmediatamente después de llegar al 50%). Por lo que en este caso, el martillo queda rotado 90 grados un 18% de la animación
Así,al tratarse de una animación de 2 segundos:
El martillo baja en 0.84 segundos (del 0% al 42%)
Permanece rotado durante 0.36 segundos (del 42% al 60%)
Vuelve a su posición inicial en 0.80 segundos (del 60% al 100%)
Compatibilidades con todos los navegadores
Como ocurre con otras funcionalidades de HTML5 todavía es necesario añadir los prefijos para que todos los navegadores (excepto Opera -que aunque funciona, no funciona bien del todo- e Internet Explorer -que, como siempre, no funciona ni bien ni mal, simplemente "no funciona") entiendan estos códigos.
Aunque en este caso este proceso de repetición de código es todavía más asfixiante, ya que no se limita a una sola línea por navegador, sino que se tiene que repetir todo el bloque de código, quedando de la siguiente extensa manera:
En este extenso código todavía no se ha añadido el prefijo -ms- para cuando Internet Explorar acepte animation.
Y por último quedaría la especificación de la animación, que después de la repetición continua del ejemplo anterior no representaría ningún exceso desmesurado: