DEV Community

Joan León
Joan León

Posted on • Originally published at joanleon.dev

Animación Web

Este es el primero de una serie de artículos para ver tecnologías, herramientas, ejemplos y performance en animación web.

  • Animación Web
  • Transiciones CSS
  • Animaciones CSS
  • Animaciones SVG (Próximamanete)
  • Animaciones JavaScript (Próximamanete)
  • Animaciones Canvas (Próximamanete)

Todas sabemos que las animaciones, ya sea en un logo, como transiciones entre estados, informativas o animación en microinteracciones, aportan valor al producto y a la experiencia.

Tenemos varias técnicas o vías de desarrollo a la hora de implementar animaciones en la web, así que vamos a conocerlas.

Opciones para hacer animaciones en la Web

Lo primero que hemos de tener en cuenta es el tipo de elemento que vamos a animar. Podemos animar un elemento del DOM, un SVG o parte de él, un atributo de un elemento del DOM (como el color) o finalmente elementos gráficos representados en un elemento <canvas>.

1.CSS

La animación con CSS se puede considerar que es la base de la animación web. Tanto para elementos del DOM como para SVG.

Transiciones

La animación básica en CSS es una transición entre 2 estados:

Transiciones

En el siguiente ejemplo podemos ver un cambio de estado en el tamaño de la imagen al poner el cursor sobre ella (hover).

Como véis, el cambio de estado es instantáneo, un poco brusco.

En CSS tenemos disponible la propiedad transition y si la utilizamos, podemos ver que cambia totalmente el efecto:

¿Qué está pasando ahora?

Al añadir la propiedad transition podemos ver que ahora tenemos una animación. Esto se debe a que el navegador está interpolando (calculando los pasos intermedios) entre los dos estados, en este caso un cambio de tamaño de la imagen y una sombra.

Transitions

En el ejemplo he utilizado la propiedad transition como shorthand, pero veamos en detalles las propiedades que tenemos disponibles.

Propiedad Función
 transition-property Propiedad CSS a la que queremos aplicar la transición
 transition-duration Tiempo transcurrido entre los estados
 transition-timing-function Función que define cómo se calcula la transición
 transition-delay Tiempo transcurrido hasta que empieza la transición
 transition Funciona como shorthand para definir las propiedades anteriores en una sola línea
@keyframes

Las transiciones son muy útiles para controlar la animación entre dos estados, pero si queremos poder animar más de 2 estados, tenemos que utilizar los @keyframes:

Animación

En el ejemplo podemos ver que hay una propiedad animation: scale 2s infinite ease; en la clase .logo y después una función @keyframes donde definimos 3 estados a la animación. Lo estamos haciendo con porcentajes 0%, 50% y 100%, hacen referencia a la línea temporal que hemos definido de 2 segundos en la propiedad animate.

Al igual que transition, he utilizado la propiedad animate como shorthand, las propiedades que podemos utilizar para definir una animación son:

Propiedad Función
animation-name Nombre de la animación, que hemos definido en @keframes
animation-duration Duración de la animación
animation-timing-function Especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo
animation-delay Tiempo transcurrido hasta que empieza la animación
animation-iteration-count Número de repeticiones de la animación
animation-direction Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia
animation-fill-mode Especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución
animation-play-state Determina si una animación está en ejecución o en pausa

No te preocupes si no entiendes algo, en siguientes artículos entraremos en detalle del funcionamiento de la propiedad animation y @keyframe.

2.SVG

Los gráficos SVG (en el HTML) acaba siendo representado en el navegador como elementos que forman parte de DOM, por lo que los podemos animar también con CSS.

En este ejemplo animamos el color de dos de los elementos del logo con CSS.

SVG tiene su propia especificación para animar elementos, pero está obsoleta, así que no voy a comentarla. Pero os dejo este enlace "SVG animation with SMIL" por si tenéis curiosidad (yo la tuve y estuve mirando cómo funciona 🤪).

3.JavaScript

Para la animación web con JavaScript, de forma nativa, tenemos a nuestra disposición Web Animation API (WAAPI).

En el ejemplo con WAAPI conseguimos el mismo efecto que la versión anterior, pero en esta ocasión la animación está definida en JavaScript, con todo el potencial programático que ello conlleva.

Esto tiene muy buena pinta, pero la mala noticia es el soporte actual en los navegadores.

Web Animations API

Como podemos ver en Can I Use nos queda lejos de poder implementar de forma nativa. Podemos utilizar un polyfill, pero eso ya lo veremos en un artículo dedicado a Web Animation API.

Es por eso que las librerías JavaScript se basan en su propia API de animación y transformación con CSS. Lo veremos en detalle cuando veamos las librerías JS.

4.Canvas

El elemento canvas tiene una API para poder pintar gráficos. En realidad las animaciones en el canvas las definimos y controlamos con JavaScript, pero lo he querido tratar a parte por ser muy diferente la manera de animar dentro de este lienzo.

Aquí os dejo un ejemplo de Ana Tudor.

Ya veremos en más detalle cómo animar en este elemento en futuros artículos, ya que da mucho juego... y ni os lo imagináis si ya metemos en escena la API WebGL o los Sahders, veréis que bien nos lo vamos a pasar.

Recursos

Al nivel tan general que he hablado de la Animación Web, tendría que poner muchas referencias. Todos estos temas los vamos a ver en detalle uno a uno, así que ya tendremos los recursos detallados en los siguientes artículos.

Pero os dejo enlace a People You Should Follow on CodePen, una lista de artistas a los que creo que es muy interesante seguir en CodePen.

Compartir, feedback y erratas

  • Si te ha gustado el artículo, compártelo para llegar a más gente.
  • Si tienes feedback que me pueda ayudar a mejorar, siéntete libre de pasarme un DM.
  • Si ves alguna errata o hay algo que no planteo bien, también agradezco las correcciones DM.

Sígueme en...

Top comments (0)