CSS permite animaciones HTML sin usar Javascript o Flash. En este capítulo veremos como hacerlo utilizando las siguientes propiedades:
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
Que son las animaciones CSS
Una animación permite que un elemento cambie gradualmente de un estilo a otro. Puedes cambiar tantas propiedades CSS como desees, tantas veces como desees. Para usar la animación CSS, primero debes especificar algunos fotogramas clave para la animación. Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.
La regla @keyframes
Cuando especificas estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente del estilo actual al nuevo estilo en ciertos momentos. Para que una animación funcione, debe vincular la animación a un elemento. El siguiente ejemplo vincula la animación «example» al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de «rojo» a «amarillo».
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>Animaciones CSS</h1>
<div></div>
<p>
<b>Observación: </b>cuando una animación termina vuelve a su estado
original
</p>
</body>
</html>
Nota: La propiedad animation-duration define cuánto tiempo debe tardar en completarse una animación. Si no se especificas la propiedad animation-duration, no se producirá ninguna animación porque el valor predeterminado es 0s (0 segundos).
En el ejemplo anterior, hemos especificado cuándo cambiará el estilo usando las palabras clave from y to (que representa 0 % (inicio) y 100 % (completado)).
También es posible utilizar porcentaje. Al usar el porcentaje, puedes agregar tantos cambios de estilo como desees. El siguiente ejemplo cambiará el color de fondo del elemento <div> cuando la animación esté completa en un 25 %, en un 50 % y nuevamente cuando la animación esté completa en un 100 %.
Ejm
/* El código de animación */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* El elemento al que se le aplica la animación */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento <div> cuando la animación esté completa en un 25 %, en un 50 % y nuevamente cuando la animación esté completa en un 100 %.
Ejm
/* El código de animación */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* El elemento al que se le aplica la animación */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}Retrasar una animación
La propiedad animation-delay especifica un retraso para el inicio de una animación. El siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación.
Ejm
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}También se permiten valores negativos. Si usas valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante N segundos. En el siguiente ejemplo, la animación comenzará como si ya se hubiera estado reproduciendo durante 2 segundos.
Ejm
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}Establecer cuántas veces debe ejecutarse una animación
La propiedad animation-iteration-count especifica el número de veces que se debe ejecutar una animación. El siguiente ejemplo ejecutará la animación 3 veces antes de que se detenga.
Ejm
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}El siguiente ejemplo usa el valor «infinito» para hacer que la animación continúe para siempre.
Ejm
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}Ejecutar animación en dirección inversa o ciclos alternativos
La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos. Dicha propiedad puede tener los siguientes valores:
- normal: la animación se reproduce normalmente (hacia adelante). este es el valor por defecto
- reverse: La animación se reproduce en dirección inversa (hacia atrás)
- alternate: La animación se reproduce primero hacia delante y luego hacia atrás.
- alternate-reverse: La animación se reproduce primero hacia atrás y luego hacia adelante.
Ejm
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}Especificar la curva de velocidad de la animación
La propiedad animation-timing-function especifica la curva de velocidad de la animación. Dicha propiedad puede tener los siguientes valores:
- ease:
- linear:
- ease-in:
- ease-out:
- ease-in-out:
- cubic-bezier(n,n,n,n):
El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar.
Ejm
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}Especificar el modo de relleno (fill-mode) para una animación
Las animaciones CSS no afectan a un elemento antes de que se reproduzca el primer fotograma clave o después de que se reproduzca el último fotograma clave. La propiedad animation-fill-mode puede anular este comportamiento. La propiedad animation-fill-mode especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que finalice o ambos). Dicha propiedad puede tener los siguientes valores:
- none: valor por defecto. La animación no aplicará ningún estilo al elemento antes o después de que se ejecute
- forwards: el elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el número de iteraciones de la animación)
- backwards: el elemento obtendrá los valores de estilo establecidos por el primer fotograma clave (depende de la dirección de la animación) y los conservará durante el período de retraso de la animación.
- both: la animación seguirá las reglas tanto para avanzar como para retroceder, extendiendo las propiedades de la animación en ambas direcciones.
Ejm
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}Propiedad resumida
El siguiente ejemplo utiliza seis de las propiedades de animación:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}El mismo efecto de animación que el anterior se puede lograr usando la propiedad de animación abreviada:
div {
animation: example 5s linear 2s infinite alternate;
}Resumen
| Propiedad | Descripción |
|---|---|
| @keyframes | Especifica el código de animación. |
| animation | Una propiedad abreviada para establecer todas las propiedades de animación. |
| animation-delay | Especifica un retraso para el inicio de una animación. |
| animation-direction | Especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos |
| animation-duration | Especifica cuánto tiempo debe tomar una animación para completar un ciclo |
| animation-fill-mode | Especifica un estilo para el elemento cuando la animación no se está reproduciendo (antes de que comience, después de que finalice o ambos) |
| animation-iteration-count | Especifica el número de veces que se debe reproducir una animación. |
| animation-name | Especifica el nombre de la animación @keyframes |
| animation-play-state | Especifica si la animación se está ejecutando o está en pausa. |
| animation-timing-function | Especifica la curva de velocidad de la animación. |