DEV Community: Joan León

CSS Community Dev Logo, CSS Houdini version

Joan León — Sun, 06 Dec 2020 19:08:53 +0000

Medellín CSS community launched a challenge to make the CSS Community Dev logo with CSS code.

And here my CSS Houdini version.

Source Code

Take a look to the source code, this is the Paint Worlet code.

registerPaint(
  'csscommunitydev',
  class {
    paint(ctx, geometry) {
      const {width: w, height: h} = geometry

      // Background
      ctx.beginPath()
      ctx.arc(w / 2, h / 2, w / 2, 0, 2 * Math.PI)
      ctx.fillStyle = '#6F0E96'
      ctx.fill()

      // Shadow
      const grShadow = ctx.createRadialGradient(
        w / 2,
        h / 2,
        0,
        w / 2,
        h / 2,
        w / 3.2
      )
      grShadow.addColorStop(0, 'rgba(0,0,0,0.6)')
      grShadow.addColorStop(1, 'rgba(111, 14, 150, 1)')
      ctx.beginPath()
      ctx.arc(w / 2, h / 2, w / 2.4, 0, 2 * Math.PI)
      ctx.fillStyle = grShadow
      ctx.fill()

      // Semi circle
      const grSemicircle = ctx.createLinearGradient(
        h * 0.133,
        w * 0.47,
        w * 0.47,
        h * 0.864
      )
      grSemicircle.addColorStop(0, '#975DF5')
      grSemicircle.addColorStop(1, '#6F0E96')
      ctx.beginPath()
      ctx.arc(w * 0.47, h / 2, w * 0.37, Math.PI * 0.5, Math.PI * 1.5)
      ctx.fillStyle = grSemicircle
      ctx.shadowColor = 'rgba(0,0,0,0.3)'
      ctx.shadowBlur = h * 0.06
      ctx.shadowOffsetX = w * 0.1
      ctx.shadowOffsetY = 0
      ctx.fill()

      // First triangle
      const grFirstTriangle = ctx.createLinearGradient(
        w * 0.56,
        h * 0.327,
        w * 0.786,
        h * 0.456
      )
      grFirstTriangle.addColorStop(0, '#43DCC9')
      grFirstTriangle.addColorStop(1, '#05F2C7')
      ctx.beginPath()
      ctx.moveTo(w * 0.56, h * 0.327)
      ctx.lineTo(w * 0.786, h * 0.197)
      ctx.lineTo(w * 0.786, h * 0.456)
      ctx.fillStyle = grFirstTriangle
      ctx.shadowColor = 'rgba(0,0,0,0.5)'
      ctx.shadowBlur = h * 0.06
      ctx.shadowOffsetX = w * -0.02
      ctx.shadowOffsetY = h * 0.08
      ctx.fill()

      // Second triangle
      const grSecondTriangle = ctx.createLinearGradient(
        w * 0.56,
        h * 0.412,
        w * 0.56,
        h * 0.802
      )
      grSecondTriangle.addColorStop(0, '#FFD900')
      grSecondTriangle.addColorStop(1, '#FF6A19')
      ctx.beginPath()
      ctx.moveTo(w * 0.56, h * 0.412)
      ctx.lineTo(w * 0.9, h * 0.606)
      ctx.lineTo(w * 0.56, h * 0.802)
      ctx.fillStyle = grSecondTriangle
      ctx.shadowColor = 'rgba(0,0,0,0.5)'
      ctx.shadowBlur = h * 0.08
      ctx.shadowOffsetX = w * 0.04
      ctx.shadowOffsetY = h * 0.08
      ctx.fill()
    }
  }
)

CSS Houdini: Lines Worklet

Joan León — Sun, 06 Dec 2020 18:30:31 +0000

A CSS Houdini Worklet to show parallel lines and you can control the colors, widths, gaps and rotation via custom properties.

An implementation sample

In combination with background-clip and -webkit-text-fill-color.

Detect AVIF image support to use in your CSS

Joan León — Sun, 06 Dec 2020 18:16:52 +0000

AVIF is a next generation image format, in the moment to write this post, the support is only by Chrome 85 and Firefox 77 under a flag.

W3C are working in the CSS Images Module Level 4, and the new module will have an interesting feature, image-set and we'll can define the image type.

.element {
  background-image: image-set( "image.avif" type("image/avif"),
                               "image.webp" type("image/webp"),
                               "image.jpg" type("image/jpeg") );
}

With image-set we'll can define different format and the browser render the first image format supported.

Until we have this awesome feature in the browsers, we can use JavaScript to detect the support, we'll to do a sample with the AVIF format.

The CSS

body {
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
}
body.avif {
  background-image: url(./images/lions.avif);
}
body.no-avif {
  background-image: url(./images/lions.jpg);
}

I know that you can put the image in JPEG format directly in the body and overwrite the background-image if the browser supports it, but for the example I think it's clearer.

The JavaScript

async function supportsAvif() {
  if (!this.createImageBitmap) return false
  const avifData =
    'data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA='
  const blob = await fetch(avifData).then((r) => r.blob())
  return createImageBitmap(blob).then(
    () => true,
    () => false
  )
}
;(async () => {
  const classAvif = (await supportsAvif()) ? 'avif' : 'no-avif'
  document.body.classList.add(classAvif)
})()

Demo

Thanks

I want to thank Jon Sneyers and Kornel, true magicians of image coders/decoders, for their help with the option of a base64 of an image of AVIF format as optimized as possible.

CSS Houdini: Connections Worklet

Joan León — Mon, 23 Nov 2020 09:26:08 +0000

A CSS Paint Worklet to load connected dots

CSS Dynamic Shadow

Joan León — Tue, 29 Sep 2020 18:22:53 +0000

Creates a shadow similar to box-shadow but based on the background inherit.

Coding Potions

Joan León — Thu, 17 Sep 2020 18:09:40 +0000

Coding Potions avatar CSS Pixel Art

You can follow me on...

Twitter: @nucliweb
YouTube: JoanLeon
Instagram: @nucliweb
GitHub: @nucliweb

CSS Pixel Art

Joan León — Thu, 17 Sep 2020 17:50:21 +0000

El pixel art o arte de píxel es una forma de arte digital, creada a través de una computadora mediante el uso de programas de edición de gráficos rasterizados, donde las imágenes son editadas al nivel del píxel. - Wikipedia

Siempre me ha gustado el pixel art, me fascina que con tan poca información podamos reconocer objetos y personajes. Mucha gente cree que al ser con "cuadraditos" (aka pixels) es una técnica de dibujo muy fácil, nada más lejos de la realidad, creo que la dificultad es proporcional a la apariencia de sencillez.

Motivación

Hace un tiempo quise jugar con el pixel art, creo que la mejor manera de empezar algo nuevo es ~~copiar~~ inspirarse en referencias que no sean muy complejas. Al mismo tiempo lo quería hacer con CSS, siempre quiero mostrar que, aun no siendo un lenguaje de programación (como siempre nos recuerda nuestro amigo Carlos Villuendas), se pueden hacer auténticas maravillas con él... ya dedicaré un post a hablar de < css-doodle /> 😊

A la sombra de CSS

Una de la propiedades CSS que tenemos disponible desde hace mucho tiempo es box-shadow, muy utilizada para resaltar elementos y dar sensación de profundidad o relieve.

La sintaxis de box-shadow tiene varias opciones, os invito a echar un vistazo a la documentación en MDN. Si tenéis alguna duda, recordad que tengo un repositorio AMA (Ask Me Anything) donde podéis hacerme llegar vuestras consultas.

Vamos a centrarnos en las sintaxis que nos permitirá crear arte pixelado.

Si nos fijamos en la definición de la propiedad, nos dice:

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

La parte que más nos interesa es la de Se pueden definir múltiples efectos separados por comas. Esto nos va a permitir definir cada uno de los píxeles de nuestro personaje.

En nuestro archivo HTML solo necesitamos un elemento HTML con una clase para aplicarle la magia del CSS.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Pixel Art</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="pixel-art"></div>
</body>
</html>

Ahora vamos a añadir el CSS necesario para pintar algunos píxeles.

.pixel-art {
  width: 1px;
  height: 1px;
  margin: 50px;
  transform: scale(20);
  box-shadow: 1px 0 red,
              2px 0 green,
              3px 0 blue;
}

Analicemos línea a línea este código

Como vamos a trabajar a nivel de píxel, lo primero que hacemos es definir un tamaño de 1px x 1px nuestro elemento HTML.
Con la propiedad margin, simplemente lo estamos posicionando a 50px de la coordenada 0,0 del body.
Esta propiedad es importante, al pintar a un tamaño de píxeles, escalamos el elemento para poder mostrarlo a un tamaño más adecuado, en este caso estamos escalando el elemento 20 veces.
Por último, definimos la propiedad que nos aporta la magia para conseguir crear nuestra obra en pixel art.

Vamos a verlo en funcionamiento

Lo que podemos ver son tres (tristes) píxeles, uno al lado del otro 😅. Pero con solo este simple ejemplo seguro que ya ves la "simplicidad" de lo que tenemos que hacer para dibujar nuestros dibujos con píxeles.

Crearemos otro ejemplo más ilustrativo.

En este otro ejemplo podéis ver que el tamaño del elemento es de 4px y el multiplicador de escala de 5 con scale(5), más tarde veremos el motivo 😊. Lo interesante es que con unos cuantos valores de sombra en nuestro CSS hemos conseguido una versión Pixel Art del logo del blog.

A nivel de pixel

Si analizamos de cerca (a nivel de pixel) cualquier obra de pixel art, podremos ver que se trata de una matriz de píxeles, donde cada uno de esos píxeles tiene la información del color con el que es representado.

La imagen anterior se vería de la siguiente manera en una matriz donde estemos definiendo el color hexadecimal de cada uno de los píxeles. Obviamos los píxeles de "padding" que hemos dejado para mejorar la lectura de la imagen, así que tendremos una matriz de 10 x 10.

#000000,#000000,#000000,#000000,#00b0b0,#00b0b0,#000000,#000000,#000000,#000000,
#000000,#000000,#000000,#00b0b0,#00b0b0,#00b0b0,#00b0b0,#000000,#000000,#000000,
#000000,#000000,#000000,#00b0b0,#f0d0d0,#f0d0d0,#00b0b0,#000000,#000000,#000000,
#f0d0d0,#000000,#000000,#000000,#f0d0d0,#f0d0d0,#000000,#000000,#000000,#f0d0d0,
#f0d0d0,#f0d0d0,#f0d0d0,#f0d0d0,#4040e0,#4040e0,#f0d0d0,#f0d0d0,#f0d0d0,#f0d0d0,
#000000,#000000,#000000,#000000,#4040e0,#4040e0,#000000,#000000,#000000,#000000,
#000000,#000000,#000000,#000000,#4040e0,#4040e0,#000000,#000000,#000000,#000000,
#000000,#000000,#000000,#4040e0,#4040e0,#4040e0,#4040e0,#000000,#000000,#000000,
#000000,#000000,#000000,#4040e0,#000000,#000000,#4040e0,#000000,#000000,#000000,
#000000,#000000,#f0d0d0,#f0d0d0,#000000,#000000,#f0d0d0,#f0d0d0,#000000,#000000;

Como si se tratase de punto de cruz, simplemente definimos un color por cada uno de los puntos que queremos pintar.

CSS vitaminado

Como estaréis imaginando, conseguir dibujos más complejos nos puede llevar mucho trabajo, y así es. Es por eso que nos vamos a apoyar en Sass para facilitar la generación de nuestras creaciones en pixel art.

Analicemos paso a paso lo que estamos haciendo

Definimos en variables los diferentes colores que necesitamos para crear nuestro dibujo. También definimos una variable con la dimensión de la cuadrícula.

$hair: #00b0b0;
$skin: #f0d0d0;
$clothes: #4040e0;
$grid: 10;

Después, utilizamos un Maps de Sass para poder utilizar las claves de índice del mapa, eso nos facilitará crear la matriz.

$colors: (
  1: $hair,
  2: $skin,
  3: $clothes
);

El siguiente paso es definir la matriz con los colores de nuestro dibujo. Lo haremos con cada una de las claves del Maps que acabamos de crear, utilizaremos 1 para hacer referencia a la variable $hair, que a su vez es el valor hexadecimal #00b0b0, el color del pelo.

// Lemming Blocker -------------------
$lemming-blocker: 0,0,0,0,1,1,0,0,0,0,
                  0,0,0,1,1,1,1,0,0,0,
                  0,0,0,1,2,2,1,0,0,0,
                  2,0,0,0,2,2,0,0,0,2,
                  2,2,2,2,3,3,2,2,2,2,
                  0,0,0,0,3,3,0,0,0,0,
                  0,0,0,0,3,3,0,0,0,0,
                  0,0,0,3,3,3,3,0,0,0,
                  0,0,0,3,0,0,3,0,0,0,
                  0,0,2,2,0,0,2,2,0,0;

Es difícil de apreciar, pero ahora mismo tenemos una matriz de 10 x 10 igual que la que hemos visto un poco más arriba, con la cuadrícula roja para ver los píxeles, con un valor numérico para cada uno de los colores. Para Sass esto es una lista, así podremos iterar sobre ella. Técnicamente es una sola línea, aquí la vemos en modo cuadrícula para facilitar la edición.

Habrás visto que para el color negro hemos utilizado el valor 0, el cual no tenemos definido en nuestro Maps, ahora veremos cómo lo vamos a utilizar.

Empecemos con la programación

Sass nos provee, como definen, un lenguaje de extensión para CSS. Se trata de un preprocesador CSS con una sintaxis que nos ofrece funciones, listas, maps o bucles entre otros.

El siguiente código contiene la "magia" necesaria para pintar todos los píxeles necesarios para dibujar el lemming.

@function pixeart($lemming-list, $shadow-count: $grid) {
  $shadows: ();
  $row: 0;
  $col: 1;

  @for $i from 1 through length($lemming-list) {
    @if( nth($lemming-list,$i) > 0 ) {
      $shadows: append($shadows, ($col * 1px) ($row * 1px) 0 map-get($colors,nth($lemming-list,$i)), 'comma');
    }

    @if($i % $grid == 0) {
      $row: $row+1;
      $col: 0;
    }

    $col: $col + 1;
  }

  @return $shadows;
}

Analicemos este código en Sass

La función pixelart acepta dos parámetros, el primero es una lista y el segundo la dimensión de la retícula, donde definimos un valor por defecto en el caso de no recibir ninguno.

Al inicio del cuerpo de la función definimos una lista vacía con $shadow, así como el valor inicial para las filas y columnas en $row y $col.

En el siguiente bloque tenemos un @for para iterar cada uno de los elementos de la lista (con nuestra matriz) que hemos recibido como argumento $leming-list.

En el primer @if, donde comprobamos si seguimos teniendo elementos de la lista, lo que estamos haciendo es añadir un elemento a la lista @shadows con addend. A append le estamos pasando 3 parámetros: la lista a la que queremos añadir el elemento, el contenido del elemento y el separador, en este caso 'coma', una palabra reservada de Sass para representar el carácter ,. Entrando en detalle del valor del elemento que estamos añadiendo vemos ($col * 1px) ($row * 1px) 0 map-get($colors,nth($lemming-list,$i)).

($col * 1px), es la posición X respecto al elemento HTML.
($row * 1px), es la posición Y respecto al elemento HTML.
0, es el valor que indica el degradado de sombra, nos interesa que sea un sombra sólida.
map-get($colors,nth($lemming-list,$i)), con la función map-get de Sass estamos cogiendo el valor de la matriz de colores según la posición $i de nuestra iteración.

En el segundo @if, simplemente comprobamos si ya hemos llegado al máximo de columnas, 10 en este ejemplo, y si es así pasamos el valor de columna a 0 y sumamos una a las filas $row

Por último, devolvemos el contenido de $shadows con @return $shadows.

Llamada desde CSS

Ahora que tenemos disponible nuestra función, la podemos utilizar en CSS con pixelart($lemming-blocker), como podemos ver en la línea 7.

.lemming--blocker {
  width: 1px;
  height: 1px;
  margin: 100px;
  transform: scale(10);

  box-shadow: pixelart($lemming-blocker);
}

Dando vida a las sombras

Ahora que ya tenemos nuestro lemming en pixel art, vamos a darle vida gracias a la animación CSS.

Como ya sabréis, una animación es la ilusión de movimiento al ver una secuencia de imágenes a cierta velocidad. Este tipo de imágenes en muchos juegos 2D son sprites, así que busqué Lemmings sprite animation y dí con esta imagen. Eso me permitió poder ver la secuencia de imágenes para hacer la animación.

El lemming de la izquierda tiene solo 2 fotogramas, así que con dos matrices ya tenemos la animación resuelta.

.lemming--blocker {
  width: 1px;
  height: 1px;
  margin: 100px;

  transform: scale(10);

  animation: blocker .65s step-start infinite;
  box-shadow: lemming($lemming-blocker-1);
}

@keyframes blocker {
  50%  { box-shadow: lemming($lemming-blocker-2); }
}

Para conseguir el efecto de andar del lemming de la derecha, requiere de 8 fotogramas, por lo que tenemos que definir 8 matrices (echad un vistazo al código de Codepen).

La asignación de la animación no tiene mucho misterio, la haremos tal y como lo hacemos en cualquier animación CSS con @keyframes.

.lemming--walker {
  width: 1px;
  height: 1px;
  margin: 100px;

  transform: scale(10);

  animation: walker .65s step-start infinite;
  box-shadow: lemming($lemming-walker-1);
}

@keyframes walker {
  12% { box-shadow: lemming($lemming-walker-2); }
  25% { box-shadow: lemming($lemming-walker-3); }
  37% { box-shadow: lemming($lemming-walker-4); }
  50% { box-shadow: lemming($lemming-walker-5); }
  62% { box-shadow: lemming($lemming-walker-6); }
  75% { box-shadow: lemming($lemming-walker-7); }
  87% { box-shadow: lemming($lemming-walker-8); }
}

Matrix no es para mí

Llegados a este punto estarás pensando: Tener que hacer una matriz de **n x n* de cada imagen, y multiplicarlo por el número de fotogramas necesario si quiero hacer una animación, en serio Joan, estás flipando.*

Este tipo de ejercicios nos sirve para practicar y aprender, pero según lo que quieras hacer está claro que es una forma muy ~~tediosa~~ artesana de hacerlo. Es por eso que te comparto el siguiente recurso.

CSS Sprite Animator

Se trata de una aplicación desarrollada por Paul Karlik, podéis encontrarla aquí y el repositorio con el código fuente aquí.

Tiene una interfaz intuitiva y simple. En el momento que añadimos más de un fotograma, en la parte superior derecha, podemos ver una previsualización de la animación.

El logo del blog en pixel art que hemos visto antes, está hecho con este editor, que está utilizando múltiples de 4 en la generación de los píxeles. Me he animado y también he creado la animación del lemming cuando está cayendo.

La aplicación también está generando el código CSS necesario para la propiedad box-shadow. Tiene una función de exportación que genera un array de objetos con los valores necesarios.

[
  [
    {"x":0,"y":0,"color":"transparent"},
    {"x":1,"y":0,"color":"transparent"},
    ...
  ],
  [ ... ]
]

Curiocssidades

Las animaciones las hemos definido con un valor de step-start para la propiedad animation-timing-function. Con step-start estamos definiendo que el navegador no genere ninguna interpolación entre un fotograma y el siguiente. El valor por defecto de esta propiedad es ease que deja al navegador la responsabilidad de calcular una interpolación entre fotogramas, y en este caso no conseguimos el efecto deseado, pero eso sí, la animación queda curiosa 😊.

Otros ejemplos

En mi cuenta de Codepen encontraréis este y otros ejemplos, algunos de ellos están hechos con p5.js (ya hablaremos de esta librería en algún momento), pero la base es la misma, utilizar una matriz para generar el dibujo pixel art.

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

Twitter: @nucliweb
YouTube: JoanLeon
Instagram: @nucliweb
GitHub: @nucliweb

Animaciones CSS

Joan León — Thu, 17 Sep 2020 17:30:44 +0000

Este artículo es parte de una serie de artículos dedicados a la Animación Web.

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

Animación CSS con @keyframes

En CSS, a parte de poder animar cambios de estados con Transiciones CSS, tenemos disponible la propiedad animate que junto con la regla arroba (at-rule) @keyframes nos permite poder definir una animación controlando el tiempo, múltiples estados (keyframes o fotogramas), número de repeticiones, dirección de la animación y la función de tiempo, para conseguir una animación más natural.

Antes de entrar en detalles, analizando cada una de las propiedades y sus valores, veamos un ejemplo de una animación.

¿Qué podemos animar en una web?

La propiedad animation nos permite animar muchas de las propiedades CSS: color, posición, márgenes, paddings (no puedo llamarle rellenos 😅), opacidad o tamaños. Tanto en la W3C, como en la MDN encontraremos una tabla de características de la propiedad. Una de esas características nos informa del Animation Type, que nos indica el tipo de animación que soporta esa propiedad not animatable, discrete, by computed value o repeatable list.

En este enlace de la MDN encontrarás una lista de las propiedades CSS que se pueden animar. O este otro donde además hay un ejemplo de cada una de ellas.

La propiedad animation

Hay varias propiedades para definir y configurar una animación, como en muchas de las propiedades CSS, lo podemos hacer con shorcut o definiendo cada una de ellas.

Creo que es mejor conocer las propiedades, y qué hacen, que memorizar el orden de los valores... así que vamos a ver todas la propiedades animation-*.

.logo {
  animation-name: logoAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: initial;
}

animation-name

Con esta propiedad definimos el nombre o nombres de la animación o animaciones que queremos aplicar al elemento, este nombre debe coincidir con uno de los @keyframes que tengamos definidos, pero en un rato lo vemos.

animation-duration

Bueno, no es difícil intuir que con esta propiedad podemos definir la duración de la animación o animaciones, lo podemos hacer indicándola en segundos o milisegundos.

animation-timing-function

En mi opinión, esta es la propiedad de animación más interesante. No permite indicar una función de tiempo que se aplicará ajustándose a la duración de la animación. Tenemos unas cuantas funciones predefinidas, que harán que nuestras animaciones tengan un aspecto más natural.

Creo que esta propiedad merece un artículo y vídeo dedicado para ver todo su potencial, así que hoy solo veremos los aspectos más básicos.

Acepta valores de "keyword" y de funciones:

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

El valor por defecto es ease y se representa así:

El eje horizontal representa el tiempo de la animación y el vertical representa los valores que se están cambiando en la animación.

De esta forma conseguimos una animación más fluida, en lugar de una animación lineal. Pero ojo, que una animación lineal puede tener sentido en algunas ocasiones, pero lo veremos con ejemplos en el capítulo específico de las CSS Easing Functions.

De momento nos quedamos con que esta propiedad nos permite tener control de cómo se va a calcular la línea temporal de la animación.

animation-delay

De igual forma que tenemos una propiedad para definir el tiempo de la animación, también podemos definir cuanto tiempo debe pasar hasta que empiece la animación. También podemos definir el tiempo con segundos y milisegundos, eso sí, podemos definir un delay negativo, lo que afecta a la línea de tiempo de la animación.

Si tenemos una animación de 2 segundos y definimos un animation-delay: -1s la animación empezará a ejecutarse de forma inmediata y además empezará en el segundo 1.

animation-iteration-count

Con animation-iteration-count podemos definir el número de veces que se ejecutará la animación, acepta un número de valor positivo o la palabra clave infinite, como en el ejemplo, esto hace que la animación se ejecute de forma infinita.

animation-direction

Esta propiedad nos permite indicar la dirección de la animación, acepta 4 valores, veamos las definiciones para entender mejor en qué nos puede ayudar esta propiedad.

normal
Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.

alternate
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés.

reverse
Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.

alternate-reverse
Es similar a alternate pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al revés y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia.

animation-fill-mode

animation-fill-mode es la propiedad que nos permite definir el estado después de la animación, y también el estado antes de la animación si existiese delay. Por defecto vuelve a su estado inicial, con el valor normal.

Dibujo de Ángel Corral

Aquí podemos ver qué pasa si aplicamos un valor de forwards.

Otro de los valores interesantes de esta propiedad es both, funcionará igual que forwards pero tendrá en cuenta el sentido de la animación. ¿Recordáis que con animation-direction podemos hacer que la animación sea invertida?, pues este valor nos ayudará a definir el comportamiento que deseemos en nuestras animaciones.

animation-play-state

Esta propiedad también es muy interesante, ya que nos permite dotar de interactividad nuestra animación desde CSS, sin utilizar JavaScript. Ya veremos más adelante cómo trabajar las animaciones con JavaScript, la API de animación es genial... bueno no nos despistemos 😊.

Los valores disponibles son:

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Global values */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

El valor por defecto es running, y podemos hacer una pausa cambiando su estado. Pero mejor veamos un ejemplo:

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.

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

Twitter: @nucliweb
YouTube: JoanLeon
Instagram: @nucliweb
GitHub: @nucliweb

Transiciones CSS

Joan León — Thu, 17 Sep 2020 17:22:45 +0000

Este artículo es parte de una serie de artículos dedicados a la Animación Web.

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

Aquí encontrarás una explicación teórica y detallada de las Transiciones CSS, si quieres ver ejemplos de implementación y casos de uso, echa un vistazo al vídeo.

Cambios de estado de propiedades CSS

Normalmente, cuando cambiamos el valor de una o varias propiedades CSS, el resultado representado por el navegador se actualiza instantáneamente. Lo podemos ver en el siguiente ejemplo, donde los valores de width y box-shadow cambian inmediatamente al poner el cursor sobre el logo, o un tap si estás en un dispositivo táctil.

Las transiciones son un efecto de presentación. El motor de renderizado del navegador hace una interpolación, calculando los valores intermedios entre un valor y otro.

Aquí tenemos el mismo ejemplo aplicando la transición.

Así funciona la transición

Si tenemos un elemento en nuestra página que queremos desplazar 200px a la derecha, lo podemos hacer con la propiedad transform.

En el ejemplo usaremos un poco de Javascript para añadir la interacción, en este caso añadiremos una clase para indicarle al elemento su nuevo estado. Podríamos hacer esto mismo sin Javascript, con un checkbox y combinación de selectores CSS, pero yo creo que Javascript nos sirve para añadir la interacción con las usuarias. Pero si hay interés ya veremos en un artículo de CSS cómo hacer este tipo de cosas sin Javascript.

Como hemos visto, la propiedad transition indica al navegador que haga la interpolación. El navegador intentará, según los recursos disponibles, actualizar el renderizado de la página a 60 fotogramas por segundo.

Si tenemos en cuenta que el desplazamiento es de 200px en un tiempo de 0.5 segundos, en un caso ideal de 60 fotogramas/segundo, la interpolación será de 30 fotogramas. El navegador hará el cálculo para la interpolación: 200px/30fps = 6.666px, así que desplazará el elemento 6.666px a la derecha en cada ciclo de la animación.

En la siguiente imagen podemos ver la representación que hace Chrome en el Developer Tools de la transición.

Tenemos una representación gráfica del número de fotogramas en la línea de tiempo, y también podemos ver el tiempo que ha tardado en hacer la transición 502,29 ms.

En las herramientas de desarrollos, tanto Chrome como Firefox, tenemos mucha información y herramientas. Ya lo analizaremos en detalle en un futuro artículo, y conocer cómo las podemos utilizar para depurar nuestras animaciones o analizar las animaciones de otras páginas web (se aprende mucho analizando el desarrollo de otras personas).

Propiedades CSS para las transiciones

Analicemos en detalle cada una de las propiedades CSS que tenemos para definir y controlar las transiciones.

transition-property

En esta propiedad podemos definir la propiedad CSS a la que queremos aplicar la transición.

Si queremos aplicar una transición entre el cambio de color de fondo de un elemento, deberíamos definirlo de la siguiente forma: transition-property: background-color.

Si echamos un vistazo a la documentación de la W3C veremos la siguiente tabla.


Values	none OR [ all OR `<property-name>` ]#
Initial value	all
Applies to	All elements and :before and :after pseudo-elements
Computed value	As specified
Inherited	No
Animatable	No

Esta tabla la veremos en casi todas la propiedades CSS en la documentación oficial de la W3C, nos informa de los posibles valores que podemos definir para esa propiedad, el valor inicial que tiene si no definimos uno nosotras, a los elementos que aplica, el valor calculado, si hereda el valor del elemento ancestro y si es un valor que se puede animar.

Un valor destacable de esta información es el valor inicial, all lo que hace que podamos obviar la definición de la propiedad que queremos animar. Otra información interesante es el hashtag # que vemos al final de los valores, esto indica que la propiedad admite una lista de valores separados por comas.

Así que podríamos definir lo siguiente para hacer referencia a varias propiedades.

.logo {
  transition-property: width, box-shadow;
}

Dedicaré un artículo a la performance en la animación, y analizaremos si tiene impacto definir las propiedades que queremos animar de forma explícita en lugar de dejar el valor predeterminado all.

transition-duration

Con la propiedad transition-duration definimos el tiempo de la transición, o transiciones si definimos una lista separada por comas (aquí también podemos ver el #). Acepta valores positivos con unidades de segundos (s) o milisegundos (ms).


Values	`<time>`#
Initial value	0s
Applies to	All elements and :before and :after pseudo-elements
Computed value	As specified
Inherited	No
Animatable	No

Si definimos un valor en negativo, el navegador ignora la regla y los cambios se aplicarían sin ninguna transición.

transition-timing-function

Con la propiedad transition-timing-function tenemos la opción de definir las funciones de tiempo. Se trata de una serie de valores: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start) predefinidos de funciona de Curvas de Bécier cubic-bezier(x1, y1, x2, y2).

Las Curvas de Bézier merecen un artículo específico y detallado, ya que tenemos una especificación dedicada a su definición, CSS Easing Functions Leve 1, así que lo trataremos en futuros artículos analizando los aspectos técnicos y casos de uso de su implementación.

Aquí tenemos la tabla con la información básica.


Values	`<timing-function>`#
Initial value	ease
Applies to	All elements and :before and :after pseudo-elements
Computed value	As specified
Inherited	No
Animatable	No

Podemos ver que el valor por defecto es ease que equivale a la Curva de Bézier cubic-bezier(0.25, 0.1, 0.25, 1).

Esta es su representación gráfica. Como ya he comentado, veremos todas con más detalle en un futuro artículo.

transition-delay

Como su propio nombre indica, la propiedad transition-delay nos permite definir un valor para indicar el timpo de espera antes de empezar la transición.

La tabla de valores es idéntica a la de transition-duration.


Values	`<time>`#
Initial value	0s
Applies to	All elements and :before and :after pseudo-elements
Computed value	As specified
Inherited	No
Animatable	No

Esta propiedad sí que permite definir un valor negativo. Por ejemplo, si tenemos un valor de -250ms en una transición de una duración de 500ms la animación tendrá la mitad del recorrido. Y si el valor negativo es superior a su equivalente positivo de transition-duration no obtendremos una transición, sino un cambio inmediato entre los dos estados.

Aquí podemos ver un ejemplo de definir un valor negativo en la propiedad transition-delay.

transition (shorthand)

Muchas de las propiedades CSS tienen un shorthand (abreviado). Nos permite utilizar una propiedad con múltiples valores, veamos un ejemplo que creo que es mucho más fácil de entender.

/* Transición con múltiples propiedades */
.logo {
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  transition-delay: 0.25s;
}

/* Transición con shorthand */
.logoJL {
  transition: width 0.5s ease-out 0.25s;
}

En el código anterior, las dos clases aplicarían la misma transición. Cuando definimos una transición como shorthand en nuestro código, si la inspeccionamos con el DevTools podremos verlo así.

Podemos ver que hay un triángulo, nos indica que hay más información disponible en esa propiedad CSS. Si hacemos clic en él, podremos observar que internamente el navegador las interpreta por separado.

Como en las propiedades anteriores, en transition también tenemos la tabla informativa de la especificación.


Values	`<single-transition>`#
Initial value	all 0s ease 0s
Applies to	All elements and :before and :after pseudo-elements
Computed value	As specified
Inherited	No
Animatable	No

<single-transition> = [ [ none &Vert; <transition-property> ] &Vert; <time> &Vert; <transition-timingfunction> &Vert; <time> ]#

En los ejemplos que hemos ido viendo he estado utilizando la transición como shorthand, ya que es lo más habitual.

Trabajando con transiciones

Valores por defecto

A la hora de trabajar con transiciones hay que entender cómo el navegador hace la interpretación de la sintaxis.

El valor por defecto de transition-property o como valor en el shorthand transition es all, eso quiere decir que la transición que apliquemos afectará a todas la propiedades (que lo permitan) de la clase CSS donde lo estemos indicando.

.logo {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

.logoJL {
  transition: all 250ms ease;
}

En el código anterior las dos clases hacen lo mismo, pero hay un detalle que debemos tener en cuenta. Si miramos cúales son los valores por defecto de cada una de esas propiedades podremos ver que estamos definiendo valores que el navegador ya los tiene por defecto.

.logo {
  transition-duration: 250ms;
}

.logoJL {
  transition: 250ms;
}

Este código tendrá exactamente el mismo comportamiento, aunque no le hayamos definido valores a transition-property y transition-timing-function.

Por temas de semántica y posterior interpretación del código, ya sea por nosotras mismas en el futuro, o por otra persona, lo habitual es (como mínimo) encontrarnos con el valor de la transition-property definido.

Transiciones múltiples

Ya lo hemos visto desde el primer ejemplo del artículo.

.logo {
  ... transition: width 0.25s, box-shadow 0.25s;
  ...;
}

Hemos definido transiciones de forma independiente para width y box-shadow. En este caso lo podríamos haber hecho con un valor de all .25s, tendría el mismo efecto. Pero hacerlo de forma separada nos permite poder definir diferentes tiempos, retardo o funciones de tiempo a cada una de las propiedades.

.logo {
  ... transition-property: width, box-shadow;
  transition-duration: 0.25s, 250ms;
  transition-timing-function: ease, ease-in-out;
  ...;
}

.logoJL {
  ... transition: width 0.25s, box-shadow 0.25s ease-in-out;
  ...;
}

A modo de ejemplo he utilizado las unidades en segundo y mili segundos, para mostrar que pueden convivir sin problemas.

En el caso de que definamos varias propiedades, donde el número de propiedades es mayor al número de valores en la propiedad duración, este se repite.

En el siguiente código los valores de transition-duration y transition-timing-function se repetirán hasta coincidir con el número de valores de transition-property.

.logo {
  ... transition-property: width, box-shadow, color, padding, border-radius;
  transition-duration: 0.25s, 250ms;
  transition-timing-function: ease, ease-in-out;
  ...;
}

Quedando así:

.logo {
  ... transition-property: width, box-shadow, color, padding, border-radius;
  transition-duration: 0.25s, 250ms, 0.25s, 250ms, 0.25s;
  transition-timing-function: ease, ease-in-out, ease, ease-in-out, ease;
  ...;
}

El orden de los valores

Como la propia documentación de la W3C nos indica, el orden de los valores en la propiedad transition es importante. Como hemos visto en las tablas más arriba nos dicen <single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>. Eso quiere decir que el navegador está esperando: none o una propiedad, seguido de la duración, la función de tiempo y por último el tiempo de retardo.

He estado probando varias combinaciones, el navegador es lo suficientemente inteligente como para saber corregir un error en el orden.

.logo {
  transition: ease-in opacity 250ms 3s;
}

En el código anterior el navegador será capaz de interpretar la transición a pesar de que los valores no estén ordenados siguiendo el estándar. Incluso si el primer valor de tiempo es negativo, interpreta que estamos indicando el valor de transition.delay ya que en transition-duration no podemos tener un valor negativo. Os invito a que probéis combinaciones para entender cómo funciona.

¿Cómo funcionan por dentro las transiciones?

Más allá de saber cómo definir nuestras transiones para poder añadir animaciones e interacciones, podemos ver en los códigos de los navegadores cómo están aplicando lo que podemos ver en las especificaciones de la W3C, que de hecho es una documentación para los desarrolladores de los navegadores, todo sea dicho.

Tenemos la suerte de tener disponible el código fuente, de la mayoría de los navegadores, accesible.

Chromium el motor utilizado en Google Chrome, Opera y recientemente por el navegador de Microsoft
Geko el motor que utiliza Mozilla para Firefox.
Webkit fue el motor de Chrome y Opera, pero ahora solo lo utiliza Safari.

Es curioso ver código como el siguiente, donde podemos ver que justamente cómo crea la lista de valores de una transición en modo shorthand transition.

const CSSValue* Transition::CSSValueFromComputedStyleInternal(
    const ComputedStyle& style,
    const SVGComputedStyle&,
    const LayoutObject*,
    bool allow_visited_style) const {
  const CSSTransitionData* transition_data = style.Transitions();
  if (transition_data) {
    CSSValueList* transitions_list = CSSValueList::CreateCommaSeparated();
    for (wtf_size_t i = 0; i < transition_data->PropertyList().size(); ++i) {
      CSSValueList* list = CSSValueList::CreateSpaceSeparated();
      list->Append(*ComputedStyleUtils::CreateTransitionPropertyValue(
          transition_data->PropertyList()[i]));
      list->Append(*CSSNumericLiteralValue::Create(
          CSSTimingData::GetRepeated(transition_data->DurationList(), i),
          CSSPrimitiveValue::UnitType::kSeconds));
      list->Append(*ComputedStyleUtils::CreateTimingFunctionValue(
          CSSTimingData::GetRepeated(transition_data->TimingFunctionList(), i)
              .get()));
      list->Append(*CSSNumericLiteralValue::Create(
          CSSTimingData::GetRepeated(transition_data->DelayList(), i),
          CSSPrimitiveValue::UnitType::kSeconds));
      transitions_list->Append(*list);
    }
    return transitions_list;
  }

  CSSValueList* list = CSSValueList::CreateSpaceSeparated();
  // transition-property default value.
  list->Append(*CSSIdentifierValue::Create(CSSValueID::kAll));
  list->Append(
      *CSSNumericLiteralValue::Create(CSSTransitionData::InitialDuration(),
                                      CSSPrimitiveValue::UnitType::kSeconds));
  list->Append(*ComputedStyleUtils::CreateTimingFunctionValue(
      CSSTransitionData::InitialTimingFunction().get()));
  list->Append(
      *CSSNumericLiteralValue::Create(CSSTransitionData::InitialDelay(),
                                      CSSPrimitiveValue::UnitType::kSeconds));
  return list;
}

Conclusiones

Las transiciones fueron el primer paso para tener animaciones en la web, son tan básicas como potentes. Nos permiten definir unas animaciones muy optimizadas. Combinando varias propiedades, tiempos de duración y tiempos de retardo podemos hacer pequeñas animaciones, pero cuando necesitamos hacer animaciones con mas de dos estados ya tenemos que pasar a utilizar las propiedades animation junto con @keyframes, pero eso lo veremos en el siguiente artículo de esta serie.

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

Twitter: @nucliweb
YouTube: JoanLeon
Instagram: @nucliweb
GitHub: @nucliweb

Animación Web

Joan León — Thu, 17 Sep 2020 16:56:39 +0000

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

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

Twitter: @nucliweb
YouTube: JoanLeon
Instagram: @nucliweb
GitHub: @nucliweb