Transiciones y Animaciones con Tailwind

Hoy en día, donde hay millones de aplicaciones y sitios web repartidos por ahí, cualquier toque más o menos ya es motivo para que un usuario se quede en nuestra página o busque otra más interactiva. Por lo tanto, la forma en que se realizan las transiciones y animaciones de nuestras aplicaciones son elementos cruciales para la experiencia del usuario, ya que personalizan su contacto y brindan comodidad y acogida.

Con eso en mente, elegí como tema de este artículo un tutorial donde aprenderemos a usar transiciones y animaciones con Tailwind, un framework que cada vez cobra más fuerza en el mercado laboral front-end. Así que empieza a pensar en todas esas animaciones que has leído en páginas web y te han enamorado, ¡porque hoy sales de aquí sabiendo cómo crearlas!

¿Qué es Tailwind CSS?

Tailwind es un framework creado con el objetivo de optimizar el uso de CSS. En lugar de que el estilo se realice a través de clases creadas manualmente por el programador (donde sus atributos se definen en un archivo importado con extensión .css).

Este framework proporciona un conjunto de clases diseñadas en el modelo CSS atómico, donde cada clase tiene una única función, como aplicar el color rojo al fondo de un elemento o transformar su texto en cursiva. Este conjunto completo de clases se puede encontrar en la documentación de Tailwind CSS e, incluso si ninguno de ellos satisface tus necesidades, ¡también puedes crear uno nuevo que sí lo haga!

Centrado en el desarrollo mobile-first, Todo el proceso de diseño se acelera y optimiza con Tailwind CSS, que, además de ser intuitivo, cuenta con documentación fácil de aprender y rápida de buscar: basta con introducir el nombre del atributo (como por ejemplo: object-fit, margin, o display) que proporciona el nombre de la clase que satisface la demanda y cómo utilizarla.

Consejos para utilizar Tailwind CSS

Hay varias formas de instalar Tailwind CSS en su proyecto dependiendo de la tecnología que esté utilizando. En la documentación de este framework existe una guía práctica para cada escenario donde se puede utilizar. ¡Simplemente sigue el paso a paso específico que se adapte a tu situación y sé feliz!

Nota: La forma más rápida de implementar Tailwind es insertar el CDN proporcionado por la documentación. Simplemente agrégalo al encabezado de tu documento HTML y deja que haga toda la magia. Dicho esto, ¿seguimos adelante?

¿Qué son las transiciones y animaciones?

Las transiciones y animaciones se pueden describir como un conjunto de definiciones que cambiarán el comportamiento de un determinado elemento o conjunto de elementos durante un determinado tiempo o interacción, como pasar el mouse sobre un botón y cambiar el color de fondo. Al ensuciarnos las manos, todos estos conceptos se entendieron mejor, ¡así que no perdamos el tiempo!

Definiendo propiedades para una transición

Tailwind proporciona a sus usuarios varias clases que, cuando se utilizan, permiten un conjunto de transiciones en un elemento determinado. Son ellas:

• transition-all: crea una transición para todas las propiedades de un elemento;
• transition: cCrea una transición solo para las propiedades color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter y backdrop-filter;
• transition-colors: crea una transición sólo para las propiedades relacionadas con el color, que son color, background-color, border-color, text-decoration-color, fill y stroke;
• transition-opacity: crea una transición sólo para la opacidad de un elemento;
• transition-shadow: define una transición solo para la propiedad box-shadow del elemento;
• transition-transform: crea una transición solo para la propiedad transform del elemento.
  

Es cierto que, usando la clase transition-all, resuelves todos tus problemas relacionados con las transiciones, pero no siempre queremos que todas las propiedades tengan esto. Es en este momento cuando las otras clases mencionadas tienen su valor.

Para ayudarlo a notar la diferencia y la importancia de las transiciones en una aplicación, usaremos el siguiente ejemplo:

En el código de la Figura 2, se creó un contenedor principal, que organiza sus elementos con un grid, con dos columnas y una sola línea. En su interior hay dos contenedores que tienen el mismo conjunto de clases, excepto el transition-all que solo estaba incluido en uno de ellos. Se crearon varios hovers de manera que, cuando pasamos el ratón sobre los elementos, se producen cambios de color, grosor, tamaño del texto e imagen del background. La diferencia entre usar transiciones para estos cambios en lugar de no usarlas es marcada:

Definiendo una duración para transiciones

Las transiciones, por defecto, tienen una duración de 150 milisegundos. Sin embargo, es posible personalizar este tiempo: la notación para utilizar esta funcionalidad es duration-{tiempo}, donde el valor del tiempo puede ser 75, 100, 150, 200, 300, 500, 700 y 1000, que representan milisegundos. Veamos un ejemplo con el mismo código que usamos en la Figura 2, con la diferencia que usaremos la clase transition-all en ambos, pero con una duración de 150 ms para uno y 1000 ms para el otro:

Transition Delay

Es posible definir un tiempo de espera para que comience a ocurrir una determinada transición. La notación para usar esta funcionalidad es delay-{tempo} donde, así como en las clases de duration, el valor del tiempo puede ser 75, 100, 150, 200, 300, 500, 700 y 1000, lo que representa milisegundos. Para visualizar cómo funciona, definamos la misma duración para nuestra transición en ambos contenedores en los ejemplos, pero con delays diferentes:

Transition Timing Function

Podemos definir cómo se comporta una determinada transición durante el tiempo en que se ejecuta (como por ejemplo: configurar una transición para que se ejecute más lentamente al principio y más rápido al final). Existen cuatro clases que nos dan opciones para configurar esta funcionalidad:

• ease-linear: asigna un tiempo constante e igual a toda la transición, desde el principio hasta el final;
• ease-in: establece una transición más lenta al principio;
• ease-out: aplica una transición más lenta al final;
• ease-in-out: aplica una transición lenta al principio y al final.
  

En el siguiente ejemplo, utilizamos las mismas definiciones de duración y transición, con la excepción de las clases ease-in e ease-out, una para cada contenedor:

Animation

Las animaciones son conjuntos sólidos de transiciones, combinados para formar interacciones increíbles. Tailwind CSS ofrece cuatro animaciones principales, lo que no te impide crear las tuyas propias, como mostraremos más adelante. Estas son cuatro animaciones:

Spin

A través de la clase animate-spin podemos aplicar un efecto de rotación lineal a los elementos, como se muestra en el ejemplo de las Figuras 10 y 11:

Ping

Con la clase animate-ping, podemos hacer que un elemento se expanda y desaparezca. Ver su aplicación en las Figuras 12 y 13:

Pulse

Por medio de la clase animate-pulse, podemos hacer que un elemento literalmente palpite, variando su opacidad entre parcial y total:

Bounce

Utilizando la clase animate-bounce, podemos hacer que un elemento salte hacia arriba y hacia abajo, como en el ejemplo de las Figuras 16 y 17.

Creando tus propias animaciones

Independientemente de cómo haya configurado su Tailwind, es posible que haya notado que, ya sea a través de un script en el head del archivo HTML o, al crear un archivo separado, en algún momento implementó Tailwind.config (su modelo se encuentra en la Figura 18). Esto es en lo que trabajaremos.

Hay dos formas de crear animaciones en Tailwind.config. El primero es usar keyframes, donde podremos indicar qué pasará en cada momento de la animación. Luego usamos el objeto animation para utilizar el keyframe criado y convertir todo en una animación con tiempo y modo de ejecución, duración y delay (si fuera necesario):

Para esto, creamos un objeto llamado keyframes dentro de extend. Em keyframes, creamos un nuevo objeto donde la clave indicará el momento de la animación en porcentaje (por medio de una string) y el valor será lo que suceda en este momento. Este valor, a su vez, también debe ser un objeto, donde cada clave será una propiedad que queremos cambiar en el momento seleccionado en la animación.

La otra forma de crear una animación personalizada es simplemente usar el objeto animation aplicado a una animación existente, como por ejemplo spin, bounce, etc. De esta forma, es posible cambiar ciertas propiedades de una animación, como ejecutarla más lentamente. ¿Qué tal si hacemos esto con la animación spin?

Consideraciones Finales

Las animaciones y transiciones son propiedades y conceptos increíbles que hacen que nuestras aplicaciones se destaquen del resto. Ahora, con el cuchillo y el queso en mano, puedes hacer lo que quieras, usando las clases ya disponibles en Tailwind CSS o creando otras nuevas, tal como se presentan.

Si quieres consultar alguna duda o simplemente charlar sobre estos y otros temas de otra manera, también puedes contactarme a mi correo electrónico bruno.cabral.silva2018@gmail.com o en mi LinkedIn.

¡Espero verte pronto! ¡Buenos estudios y hasta luego!