Insertar animaciones con CSS3

Después de dedicar sendos artículos a las transiciones CSS3 y a las transformaciones, en esta entrada cierro el círculo con las principales propiedades de las animaciones con CSS3. Se establecen mediante la regla @keyframes y podemos especificar valores como la duración, el número de repeticiones o la dirección.

animation-duration

Es indispensable definir un intervalo de tiempo para que se produzca el cambio deseado y, por tanto, exista una animación. En el siguiente ejemplo se varía el color del texto de un div, en un lapso de 3 segundos. Asimismo, contiene dos pasos intermedios articulados por porcentajes, de modo que tras un segundo el color pasaría a rojo, en dos a amarillo y, finalmente, en tres a azul.

@keyframes ejemplo {
   0% { color: black; }
   33% { color: red; }
   67% { color: yellow; }
   100% { color: blue; }
}

/* Elemento al que se aplica la animación */
div {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   color: black; /* Color inicial */
   animation-name: ejemplo; /* Nombre de la animación */
   animation-duration: 3s; /* Duración */
}

animation-delay

Esta propiedad retarda el comienzo, según la pausa fijada. Continuando con el ejemplo anterior:

div {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   color: black;
   animation-name: ejemplo;
   animation-duration: 3s;
   animation-delay: 1s; /* Retraso */
}

animation-direction

Nos permite modificar la dirección de la animación. Con reverse avanzará en sentido contrario, mientras que con el empleo de alternate irá cambiando el rumbo hacia adelante y atrás.

div {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   color: black;
   animation-name: ejemplo;
   animation-duration: 3s;
   animation-delay: 1s;
   animation-direction: alternate; /* Dirección */
}

animation-iteration-count

Número de repeticiones del proceso. Atiende a un número o al valor infinite, que determina un bucle sin fin.

div {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   color: black;
   animation-name: ejemplo;
   animation-duration: 3s;
   animation-delay: 1s;
   animation-direction: reverse;
   animation-iteration-count: 5; /* Repeticiones */
}

animation-timing-function

Precisa la cadencia de la animación, a partir de las opciones enumeradas a continuación:

• linear: la velocidad es invariable en el tiempo.
• ease: al principio y al final va más lenta que durante el ciclo intermedio.
• ease-in: comienza despacio, para luego avanzar de forma constante.
• ease-out: ofrece el efecto contrario de ease-in, ralentizando la conclusión.
• ease-in-out: es similar a ease, pues también arranca y finaliza con lentitud. Sin embargo, inicia más rápido que termina, desarrollándose de manera asimétrica.
• cubic-bezier: nos habilita a personalizar el progreso de la curva, de acuerdo con nuestros criterios. La siguiente herramienta nos facilita la labor: cubic-bezier.com

div {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   color: black;
   animation-name: ejemplo;
   animation-duration: 3s;
   animation-delay: 1s;
   animation-direction: reverse;
   animation-iteration-count: 5;
   animation-timing-function: ease-in; /* Cadencia */
}