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:
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:
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
animationy@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.
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.
Top comments (0)