CSS Animations

---

Animaciones CSS

CSS permite la animación de elementos HTML sin usar JavaScript o Flash.

En este capítulo aprenderás acerca de las siguientes propiedades:

• @keyframes

• animation-name

• animation-duration

• animation-delay

• animation-iteration-count

• animation-direction

• animation-timing-function

• animation-fill-mode

• animation

---

Soporte del navegador para animaciones

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

---

¿Qué son las animaciones CSS?

Una animación permite que un elemento cambie gradualmente de un estilo a otro.

Puede cambiar tantas propiedades CSS como desee, tantas veces como desee.

Para usar la animación CSS, primero debes especificar algunos @keyframes clave para la animación.

Los @keyframes clave contienen los estilos que tendrá el elemento en determinados momentos.

---

La regla @keyframes

Cuando especifica 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":

Ejemplo:

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Ver ejemplo

---

Nota: La propiedad animation-duration define cuánto tiempo debe tardar en completarse una animación. Si no se especifica la propiedad animation-duration, no se producirá ninguna animación porque el valor predeterminado es 0s (0 segundos).

En el ejemplo anterior, especificamos cuándo cambiará el estilo usando las palabras clave from y to (que representa 0 % (inicio) y 100 % (completado)).

También es posible utilizar porcentajes. 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%:

Ejemplo:

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Ver ejemplo

---

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%:

Ejemplo:

/* The animation code */
@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;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Ver ejemplo

---

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:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Ver ejemplo

---

También se permiten valores negativos. Si usa 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:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Ver ejemplo

---

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:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Ver ejemplo

---

El siguiente ejemplo usa el valor infinite para hacer que la animación continúe para siempre:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Ver ejemplo

---

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.

La propiedad animation-direction puede tener los siguientes valores:

• normal - La animación se reproduce normalmente (hacia delante). Esto es 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.

El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás):

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Ver ejemplo

---

El siguiente ejemplo usa el valor alternate para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Ver ejemplo

---

El siguiente ejemplo usa el valor alternate-reverse para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Ver ejemplo

---

Especificar la curva de velocidad de la animación

La propiedad animation-timing-function especifica la curva de velocidad de la animación.

La propiedad animation-timing-function puede tener los siguientes valores:

• ease - Especifica una animación con un inicio lento, luego rápido y luego final lento (esto es predeterminado).

• linear - Especifica una animación con la misma velocidad de principio a fin.

• ease-in - Especifica una animación con un comienzo lento.

• ease-out - Especifica una animación con un final lento.

• ease-in-out - Especifica una animación con un comienzo y un final lentos.

• cubic-bezier(n,n,n,n) - Le permite definir sus propios valores en una función cubic-bezier.

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:

Ejemplo:

#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;}

Ver ejemplo

---

Especificar el modo de relleno para una animación

Las animaciones CSS no afectan a un elemento antes de que se reproduzca el primer @keyframe o después de que se reproduzca el último @keyframe. 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).

La propiedad animation-fill-mode 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 @keyframe 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 @keyframe (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 adelante como para atrás, extendiendo las propiedades de la animación en ambas direcciones.

El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave cuando finaliza la animación:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Ver ejemplo

---

El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer @keyframe antes de que comience la animación (durante el período de retraso de la animación):

Ejemplo:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Ver ejemplo

---

El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer @keyframe antes de que comience la animación y retiene los valores de estilo del último @keyframe cuando finaliza la animación:

Ejemplo:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Ver ejemplo

---

Propiedad abreviada de animación

El siguiente ejemplo utiliza seis de las propiedades de animación:

Ejemplo:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Ver ejemplo

El mismo efecto de animación que el anterior se puede lograr usando la propiedad abreviada animation:

Ejemplo:

div {
  animation: example 5s linear 2s infinite alternate;
}

Ver ejemplo

---

Propiedades de animación CSS

La siguiente tabla enumera la regla @keyframes y todas las propiedades de animación CSS:

---

Traducido con 💚 desde W3Schools.com