Lección 20: 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

Animación frame a frame

Ya somos capaces de montar animaciones simples a partir de estilos CSS que van cambiando a lo largo de una línea de tiempo. Pero, ¿como puedo escapar de las limitaciones de los estilos? ¿Cual es la técnica para crear cualquier tipo de movimiento? Como siempre se han realizado las animaciones: cuadro a cuadro o frame a frame.

Por ejemplo, el siguiente personaje caminando no es posible realizarlo con formas simples de CSS. En cambio tus ojos están contemplando una animación real en HTML.

Para lograrlo debes partir con una imagen donde se ha dibujado cada uno de los fotogramas.

Sprite sheet personaje caminando

En cuando lo has construido, es rápido aplicarlo. Se añade como una imagen de fondo que se irá trasladando.

@keyframes caminado {
  to { background-position: -1000px 0; }
}

.personaje {
  width: 125px;
  height: 168px;
  background: url(sprite-sheet.png) 0 0;
  animation: caminado 1s infinite;
}
<div class="personaje"></div>

Ya solo nos queda indicar que la transición no sea fluida, se represente con saltos o steps. Uno por cada frame, en el ejemplo serían 8.

@keyframes caminado {
  to { background-position: -1000px 0; }
}

.personaje {
  width: 125px;
  height: 168px;
  background: url(sprite-sheet.png) 0 0;
  animation: caminado 1s infinite steps(8);
}

Herramientas avanzadas

Un buen recopilatorio, fácil de utilizar, son las recogidas en Animation.css. Sin embargo una de las herramientas más completas en el sector es Greensock, aunque requiere conocimientos en JavaScript.

20-1 20-2 20-3 20-4 20-5 20-6

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario