Animaciones CSS
Las animaciones CSS permiten reallizar animaciones a la mayoría de los elementos HTML sin usar JavaScript o Flash.
¿Qué son las animaciones CSS?
Una animación permite que un elemento HTML cambie gradualmente de un estilo a otro. Se pueden cambiar tantas propiedades CSS y tantas veces como se desee. Para usar animaciones CSS se debe especificar primero algunos "fotogramas clave" o "keyframes" para la animación. Los keyframes contienen que estilos tendrán los elemento en ciertos momentos.
La Regla @keyframes
Cuando se especifican estilos CSS dentro de la regla @keyframe
, la animación cambiará gradualmente del estilo actual a el nuevo estilo en ciertos momentos. Para que una animación funcione, se debe vincular la animación al elemento HTML.
En el siguiente ejemplo se vincula la anmación "ejemplo" a un elemento <div>
. La animación tardará 4 segundos y cambiará gradualmente la propiedad background-color
de el elemento <div>
de "red" a "yellow":
/* Código de animación */
@keyframes ejemplo {
from { background-color: red; }
to { background-color: yellow; }
}
/* Elemento al que aplica la animación */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
}
Nota: La propiedad animation-duration
define el tiempo debe tardar en completarse una animación. Si la propiedad no es especificada, la animación no se realizará, esto porque el valor predeterminado es 0, es decir, 0 segundos.
En el ejemplo anterior se ha especificado cuando el estilo cambiará usando los keyframes "from" y "to", lo cual representa inicio del 0% y completado al 100%. Es posible también usar porcentajes y al usarlos se pueden agregar varios cambios de estilo como se desee.
En el siguiente ejemplo cambiará la propiedad background-color
de un elemento <div>
cuando la animación lleve el 25% completado, y de nuevo cuando la animación llegue al 100% completado.
/* El código de animación */
@keyframes ejemplo {
0% { background-color: red; }
25% { background-color: yellow; }
50% { background-color: blue; }
100% { background-color: green; }
}
/* Elemento al que aplica la animación */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
}
En el siguiente ejemplo se cambiará tanto la propiedad background-color
como la posición de un elemento <div> cuando la animación llegue al 25% de completado, después cuando llegue al 50% de completado y de nuevo cuando la animación llegue al 100% de completado.
/* El código de animación */
@keyframes ejemplo {
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; }
}
/* Elemento al que 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.
En el siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-delay: 2s;
}
También se permiten valores negativos. Si se usan valores negativos, la animación iniciará como si ya se hubiera estado reproduciendo n segundos.
En el siguiente ejemplo, la animación iniciará como si ya hubiera estado reproduciendo hace 2 segundos:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-delay: -2s;
}
Iteraciones para animaciones
La propiedad animation-iteration-count
especifica el número de veces que una animación debe de ejecutarse.
En el siguiente ejemplo la animación se ejecutara 3 veces antes de detenerse:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 3;
}
En el siguiente ejemplo, se usa el valor infinite
para hacer que la animación continúe por siempre:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Dirección de Animaciones
La propiedad animation-direction
especifica si una animación de ser reproducida hacia adelante, hacia atras o en ciclos alternos.
La propiedad animation-direction
puede tener los siguientes valores:
normal
: La animación es reproducida en dirección normal, es decir, hacia adelante. Este es el valor predeterminado.reverse
: La animación es reproducida en dirección inversa.alternate
: La animación es primero reproducida en dirección hacia adelante y después en dirección inversa.alternate-reverse
: La animación es primero reproducida en dirección inversa y después en dirección hacia adelante.
En el siguiente ejemplo, la animación se reproducirá en dirección inversa:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-direction: reverse;
}
En el siguiente ejemplo se utiliza el valor alternate
para hacer reproducir primero la animación en dirección hacia adelante y después en dirección inversa:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
En el siguiente ejemplo se utiliza el valor alternate-reverse
para reproducir primero la animación en dirección inversa y después en dirección hacia adelante:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Curva de velocidad para animaciones
La propiedad animation-timing-function
especifica la curva de velocidad de una animación y puede tener los siguientes valores:
ease
: Especifica un animación con un inicio lento, después rápido, y termina lento. Este es el valor predeterminado.linear
: Especifica una animación con la misma velocidad de inicio a fin.ease-in
: Especifica una animación con un inicio lento.ease-out
: Especifica una animación con un termino lento.ease-in-out
: Especifica una animación con un inicio y terminación lento.cubic-bezier(n,n,n,n)
: Permite definir valores propios en una función cubic-bezier.
En el siguiente ejemplo se muestran algunas de las diferentes curvas de velocidad que pueden ser usadas:
#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; }
Modo de relleno para animaciones
Las animaciones CSS no afectan a un elemento antes de que primer keyframe es reproducido o después del último keyframe es reproducido. La propiedad animation-fill-mode
puede anular este comportamiento.
La propiedad animation-fill-mode
especifica un estilo para el elemento destino cuando la animación no es reproducida (antes de iniciar, después de terminar o ambos).
La propiedad animation-fill-mode puede tener los siguientes valores:
none
: Valor predeterminado. La animación no aplicará ningún estilo a el elemento antes o después de su reproducción.forwards
: El elemento mantendrá los valores de estilos que se estableció en el último keyframe. Toma en cuenta la dirección y de la iteración de la animación (animation-direction
yanimation-iteration-count
).backwards
: El elemento obtendra los valores de estilos que son especificados por el primer keyframe y los mantendrá durante el periodo de retraso de la animación (animation-delay
). Toma en cuanta la dirección de la animación (animation-direction
).both
: La animación seguirá las reglas tanto deforwards
como debackwards
, extendiendo las propiedades en ambas direcciones (animation-direction
).
En el siguiente ejemplo el elemento <div>
mantiene los valores de estilos del último keyframe cuando la animación termina:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: ejemplo;
animation-duration: 3s;
animation-fill-mode: forwards;
}
En el siguiente ejemplo el elemento <div>
obtiene los valores de estilos especificados por el primer keyframe antes de que inicie la animación y durante el periodo de retraso también.
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: ejemplo;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
En el siguiente ejemplo el elemento <div>
obtiene los valores de estilos especificados por el primer keyframe antes de que inicie la animación y mantiene los valores de estilos del último keyframe cuando la animación termina.
div {
width: 100px;
height: 100px;
background: red;
animation-name: ejemplo;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Escritura Corta o Taquigráfica de la propiedad de animación
En el siguiente ejemplo se muestra la utilización de la propiedad animation
que es la escritura corta o taquigráfica:
div {
animation: ejemplo 5s linear 2s infinite alternative;
}
Reglas y propiedades de animación CSS
En la siguiente tabla se listan las reglas @keyframes y las propiedades de animación CSS:
Propiedad | Descripción |
---|---|
@keyframes |
Especifica el código de la animación. |
animation |
Propiedad de escritura corta (o taquigráfica) para especificar 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 ser reproducida hacia adelante, hacia atrás o en ciclos alternos. |
animation-duration |
Especifica cuanto tiempo una animación debe tomar para completar un ciclo. |
animation-fill-mode |
Especifica un estilo para un elemento cuando la animación no se esta reproduciendo (antes de inicar, después de terminar o ambas). |
animation-iteration-count |
Especifica el número de veces que una animación debe de reproducirse. |
animation-name |
Especifica el nombre de la animación @keyframes. |
animation-play-state |
Especifica si la animación esta reproduciéndose o pausada. |
animation-timing-function |
Especifica la curva de velocidad de la animación. |