Aplicando las animaciones
Una vez definida la animación con la regla @keyframe podemos usarla aplicándolo a las estilos de los elementos que queremos animar. Esto lo hacemos mediante la regla animation en su versión corta o desglosada en partes. Observa esta aplicación
<style>
@keyframes rotar
{
from {transform:rotateZ(0deg)}
to {transform:rotateZ(360deg)}
}
</style>
Hemos definido la animación para hacer un giro plano, alrededor del eje Z (o sea como si viéramos un disco desde arriba o las manecillas del reloj). Ahora definimos un estilo para aplicar esta animación
<style>
#giro
{
width: 100px;
height: 100px;
margin: 50px;
background-color: orange;
animation: rotar 10s infinite;
animation-delay: 2s;
animation-timing-function: linear;
}
</style>
Ahora aplico esto en un bloque
<body>
<div id="giro">
Este bloque gira en plano
</div>
</body>
Es fácil, si lo pruebas veras un bloque cuadrado que gira sin parar con un delay inicial de 2 segundos
Puedes modificar esto y llegar a algo un poquito más sofisticado:
Es fácil ¿verdad?, pero bueno aquí tienes algo más detallado los argumentos usados en este tipo de animaciones
La propiedad animation realmente es una forma abreviada de varias propiedades, usadas para definir la duración, velocidad y otros aspectos de la animación. Son:
- animation-name: nombre , definido con @keyframes
- animation-duration: Milisegundos que durará la animación
- animation-delay: retraso para el comienzo de la animación (0 por defecto)
- animation-iteration-count: número de repeticiones, infinite para bucle continuo
- animation-timing-function: efectos de velocidad.
- linear: igual velocidad en toda la animación
- ease: inicio lento, avance rápido y dinal lento
- ease-in: inicio lento
- ease-out: final lento
- ease-in-out: inicio y final lentos
- cubic-bezier(n,n,n,n): las velocidades se definen mediante parámetros entre 0 y 1
- animation-direction: dirección de la animación:
- normal: de atrás adelante
- alternate: de atrás adelante y luego de adelante atrás, alternando.
- animation-play-state: útil para scripts, indica el estado de la animación: running o paused
Pues ya solo te queda experimentar para ver las posibilidades de esta potente propiedad de las reglas de estilo CSS3