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

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

¿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