Lección 22: Animation | Curso CSS

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

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 {

  from {
    background-position: 0 0;
  }

  to {
    background-position: -1000px 0;
  }

}

.personaje {
  width: 125px;
  height: 168px;
  background-image: url(sprite-sheet.png);
  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 {

  from {
    background-position: 0 0;
  }

  to {
    background-position: -1000px 0;
  }

}

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

Accesibilidad

Las animaciones pueden ser un problema para las personas con discapacidad. Por ello, es importante que se reproduzcan a no ser que el usuario diga lo contrario. En CSS disponemos del media prefers-reduced-motion.

@media (prefers-reduced-motion: no-preference) {
    /* Aquí irán TODAS las animaciones */
}

Puedes automatizar el proceso con un mixin de SASS.

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.

Actividad 1

Crea un circulo, representando al Sol, que se sitúe en mitad de la página. A continuación crea otro circulo que represente una luna con la animación para realizar un eclipse, o tape por completo, durante unos instantes.

Actividad 2

A partir de imágenes o formas simples, crea una noria que rote lentamente.

Actividad 3

Transcurrido unos segundos muestra, con una elegante animación (fundido o desplazamiento), un cartel de cookies.

Actividad 4

Crea un reloj animado donde funcionen sus agujas.

Pista: Puedes apoyarte con transform-origin.

Actividad 5

Busca referencias de loadings (cargando...) animados y crea el tuyo propio.

Actividad 6

Crea una animación de un péndulo.

Pista: Necesitarás transform-origin.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario