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 y animation-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 de forwards como de backwards, 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.