Animaciones CSS

Seguro que has visto que no hay ninguna animación, eso es porque he definido un estado inicial de la animación pausada animation-play-state: paused;, y con un hover en el body cambio el estado de la animación a running. Prueba a poner el cursor, perdón a la gente que esté leyendo esto desde un dispositivo móvil 😅, en área de Result. Verás que la animación se ejecuta y pausa según haces hover o no sobre el body del documento.

Los shorthands y valores por defecto

El shorthands animation

Por norma general cuando veamos un código CSS con una animación veremos algo como esto:

.logo {
  animation: scale 2s infinite ease-in;
}

Es la forma abreviada de definir una animación. La especificación define un orden para los parámetros, así se facilita la compatibilidad entre los navegadores a la hora de su implementación.

.logo {
  animation: "animation-name" "animation-duration" "animation-timing-function"
    "animation-delay" "animation-iteration-count" "animation-direction"
    "animation-fill-mode";
}

Los pongo uno bajo el otro para mejorar la legibilidad, pero se definen todos en la misma línea y sin separarlos por una coma. Aunque ese es el orden definido por la W3C, si se cambia el orden, los navegadores son lo suficientemente inteligentes para entender cada uno de los valores a qué hace referencia. Una cosa a tener en cuenta es el duration y el delay, si solo hay un valor de tiempo, el navegador interpretará que es duration y si hay dos, el primero será duration y el segundo será para definir el delay.

Los valores por defecto

En los ejemplos que hemos ido viendo, he definido valor a todas las propiedades por temas docentes, pero hemos de tener en cuenta que la ausencia de alguna de esas propiedades se representarán con su valor por defecto.

Por ejemplo, no hace falta definir animation-timing-function: ease o animation-delay: 0s, ya que son los valores por defecto.

Los @keyframes

Hasta ahora hemos visto todas las propiedades de tiempo, función, iteraciones, etc… para añadir la animación a una clase, pero, ¿dónde creamos o definimos la animación?

Aquí entran en escena los @keyframes. Como vimos en el artículo de las Transiciones CSS, con las transiciones podemos hacer que el navegador haga una interpolación entre dos estados y conseguir así, una animación. Pero cuando queremos tener una animación con más de 2 estados tenemos que utilizar los @keyframes.

Los keyframes hacen referencia a los fotogramas de la animación, y podemos definir los que necesitemos, vamos a ver el códico de la animación que hemos estado utilizando como ejemplo.

@keyframes logoAnimation {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

Lo primero que vemos es que no estamos definiendo un selector, sino un at-rule (como @media, @support, @font-face, etc…), es @keyframe segido del nombre que queremos que tenga la animación. Ese nombre es el identificador que estamos utilizando en la propiedad animation-name. Seguimos con un bloque, como también hacemos en las clases, pero en esta ocasión no definimos propiedades CSS, definimos bloques de keyframes donde en su interior escibiremos las propiedades CSS que queremos animar… ahora es cuando empieza lo emocionante 😊.

Para definir los keyframes (fotogramas), tenemos dos maneras de hacerlo, mediante palabras clave o con porcentajes.

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

from equivale al 0% y to equivale al 100%.

Estas dos animaciones son equivalentes, es totalmente indiferente desde el punto de vista del navegador.

@keyframes logoAnimation_keyworks {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes logoAnimation_percentage {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

Incluso podemos mezclar las palabras clave y los porcentajes.

@keyframes logoAnimation {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

Animaciones múltiples

Igual que en las transiciones, la animaciones admiten definir múltiples animaciones. Esto nos permite tener un mayor control si queremos hacer una animación secuencial.

En este ejemplo he creado una secuencia de 4 animaciones.

.logo {
  animation: fadeIn 1s ease-in forwards, growth 1s 1s ease-in forwards,
    fadeOut 1s 2s ease-out forwards, logoAnimation 500ms 3s ease-in forwards;
}

Controlamos la secuencia de las animaciones con la propiedad animation-delay, sumando el tiempo de las animaciones anteriores.

Esto es un trabajo muy artesanal y nada escalable, pero eso ya lo veremos cuando trabajemos con las animaciones con JavaScript.

Conclusión

Hasta aquí hemos visto lo básico de la animación con CSS, en la implementación encontraremos algunos casos donde hay que conocer bien las posibilidades de las propiedades CSS. En futuros capítulos veremos ejemplos de implementación, depuración, optimización y buenas prácticas.