Animación Web
Tags: web, animation, css, svg
Published: 2020-09-17 16:56:39

---
title: Animación Web
published: true
description: Hace mucho tiempo que tenemos animación en la web, echemos un vistazo a las diferentes maneras de hacer animación web.
tags: Web, Animation, CSS, SVG
canonical_url: https://joanleon.dev/animacion-web
//cover_image: https://direct_url_to_image.jpg
---

> 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](https://dev.to/nucliweb/transiciones-css-40po)
- [Animaciones CSS](https://dev.to/nucliweb/animaciones-css-33h9)
- _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 <acronym title="Documen Object Model">DOM</acronym>, un <acronym title="Scalable Vector Graphic">SVG</acronym> 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 <acronym title="Cascading Style Sheets">CSS</acronym> 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](https://joanleon.dev/static/533de9cb58d7474a89d46c30890ae919/30744/transition.png)

<div style="margin-bottom: 2em" />

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

{% codepen https://codepen.io/nucliweb/pen/ExjxdzL %}

<div style="margin-bottom: 2em" />

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:

{% codepen https://codepen.io/nucliweb/pen/OJVJBeV %}

<div style="margin-bottom: 2em" />

##### ¿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 |

<div style="margin-bottom: 2em" />

##### @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](https://joanleon.dev/static/51cd092a48a33973bee04051e0484028/30744/animation.png)

<div style="margin-bottom: 2em" />

{% codepen https://codepen.io/nucliweb/pen/zYGYMdM %}

<div style="margin-bottom: 2em" />

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`.

<div style="margin-bottom: 2em" />

#### 2.SVG

Los gráficos <acronym title="Scalable Vector Graphic">SVG</acronym> (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.

{% codepen https://codepen.io/nucliweb/pen/GRJgpMp %}

<div style="margin-bottom: 2em" />

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](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL)" por si tenéis curiosidad _(yo la tuve y estuve mirando cómo funciona_ 🤪*)*.

<div style="margin-bottom: 2em" />

#### 3.JavaScript

Para la animación web con JavaScript, de forma nativa, tenemos a nuestra disposición [Web Animation API](https://www.w3.org/TR/web-animations-1/) (WAAPI).

{% codepen https://codepen.io/nucliweb/pen/LYVEdEg %}

<div style="margin-bottom: 2em" />

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](https://joanleon.dev/static/de8483b6020b4cc6f449ed22bda3ef97/30744/web-animation.png)

<div style="margin-bottom: 2em" />

Como podemos ver en [Can I Use](https://caniuse.com/#feat=web-animation) nos queda lejos de poder implementar de forma nativa. Podemos utilizar un [polyfill](https://web-animations.github.io/web-animations-demos/), 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.

<div style="margin-bottom: 2em" />

#### 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](https://twitter.com/anatudor).

{% codepen https://codepen.io/nucliweb/pen/MWYRaKa %}

<div style="margin-bottom: 2em" />

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](https://github.com/nucliweb/People-You-Should-Follow-on-CodePen), una lista de artistas a los que creo que es muy interesante seguir en **CodePen**.

<div style="margin-bottom: 8em" />

#### 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](https://twitter.com/nucliweb).
- Si ves alguna errata o hay algo que no planteo bien, también agradezco las correcciones [DM](https://twitter.com/nucliweb).

<div style="margin-bottom: 4em" />

#### Sígueme en...

- **Twitter:** [@nucliweb](https://twitter.com/nucliweb)
- **YouTube:** [JoanLeon](https://www.youtube.com/c/JoanLeon)
- **Instagram:** [@nucliweb](https://www.instagram.com/nucliweb/)
- **GitHub:** [@nucliweb](https://github.com/nucliweb)