22. Animation

A continuación puedes observar una animación básica con los estilos mínimos para que funcione.

/* Definición de la animación */
@keyframes animacion-rotacion {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(90deg);
  }
}

.cuadrado {
  width: 10rem;
  height: 10rem;
  background: orange;
  /* Declaración de la animación */
  animation-name: animacion-rotacion;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Siempre debe estar compuesto por keyframes (definición de la animación) y sus estilos (configuración).

@keyframes

Nos permite definir los pasos de una animación donde indicamos cada paso con un porcentaje respecto a la duración final.

@keyframes [nombre] {

  [paso inicial] {

  }

  [paso final] {

  }

}

La estructura más sencilla es usando el alias from (0%) y to (100%).

@keyframes animacion-transicion-color {

  from {
    color: red;
  }

  to {

    color: yellow;
  }

}

Qué es equivalente a:

@keyframes animacion-transicion-color {

  0% {
    color: red;
  }

  100% {
    color: yellow;
  }

}

Si queremos agregar más pasos solo hay que añadir más elementos.

@keyframes animacion-caida-pelota {

  0% {
    top: 0;
  }

  50% {
    top: 100px;
  }

  100% {
    transform: scaleY(0.5);
  }

}

@keyframes animacion-vibracion {

  0% {
    top: 0;
  }

  5% {
    top: -100px;
  }

  10% {
    top: 100px;
  }

  100% {
    top: 0;
  }

}

Más información

animation-name

Nombre del keyframe a asociar con el elemento.

.elemento {
  animation-name: animacion-rotacion;
}

Más información

animation-duration

Tiempo que durará la animación.

.elemento {
  animation-duration: 2s;
}

Más información

animation-timing-function

Función que define la curva de la animación.

.elemento {
  /* Por defecto */
  animation-timing-function: ease;

  /* Otras funciones prestablecidas */
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: linear;

  /* A medida */
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Más información

animation-delay

Retardo en empezar.

.elemento {
  animation-delay: 1s;
}

Más información

animation-iteration-count

Cantidad de ocasiones que se repetirá.

.elemento {
  animation-iteration-count: 1;
  animation-iteration-count: infinite;
}

Más información

animation-direction

Dirección en que se ejecutará la animación: normal, inversa o alternando.

.elemento {
  /* Por defecto, se reproduce en una dirección */
  animation-direction: normal;
  /* Se reproduce en dirección inversa */
  animation-direction: reverse;
  /* Se reproduce en dirección normal y se reproduce de nuevo en dirección inversa */
  animation-direction: alternate;
  /* Se reproduce en dirección inversa y se reproduce de nuevo en dirección normal */
  animation-direction: alternate-reverse;
}

Más información

animation-fill-mode

Podemos controlar que estilos permanecen una vez acabada la animación.

.elemento {
  /* Por defecto, los estilos vuelven a estado previo a la animación */
  animation-fill-mode: none;
  /* Al terminal la animación mantiene los estilos finales */
  animation-fill-mode: forwards;
}

Más información

animation-play-state

Podemos indicar si la animación debe reproducirse o pausarse

.elemento {
  /* Reproducirse */
  animation-play-state: running;
  /* Pausarse */
  animation-play-state: paused;
}

Más información