Animaciones y Transiciones

Tailwind CSS ofrece una forma sencilla de agregar transiciones y animaciones a tus elementos, lo que mejora la experiencia del usuario al proporcionar una interfaz más dinámica e interactiva. En este módulo, exploraremos cómo utilizar transiciones y animaciones predefinidas y cómo crear animaciones personalizadas en Tailwind CSS.

1. Propiedades de transición en Tailwind #

Las transiciones en CSS permiten cambiar gradualmente las propiedades de un elemento (como el color, la opacidad o el tamaño) cuando ocurre un evento, como un "hover" o un "click". Tailwind CSS tiene clases utilitarias que facilitan la implementación de estas transiciones sin necesidad de escribir CSS adicional.

Clases básicas de transición: #

• transition: Aplica la transición a todas las propiedades cambiadas.
• transition-colors: Aplica la transición solo a los cambios de color (fondo, texto, borde).
• transition-opacity: Aplica la transición solo a la opacidad.
• transition-transform: Aplica la transición a transformaciones como scale, rotate, translate.
• duration-300: Controla la duración de la transición (300 milisegundos en este caso).
• ease-in, ease-out: Controlan cómo se aplica la aceleración durante la transición.

Ejemplo básico de transición:

• transition-colors: Solo afecta al color de fondo durante la transición.
• duration-600: La transición dura 300ms.

Referencia: Transiciones en Tailwind

Animaciones predefinidas #

Tailwind CSS incluye varias animaciones predefinidas que pueden ser aplicadas directamente a tus elementos. Estas animaciones incluyen efectos como el parpadeo o giro.

Clases de animación predefinidas: #

• animate-pulse: Hace que el elemento pulse, cambiando la opacidad y el tamaño ligeramente.
• animate-bounce: Hace que el elemento rebote hacia arriba y hacia abajo.
• animate-spin: Hace que el elemento gire continuamente.
• animate-ping: Hace que el elemento crezca y se desvanezca repetidamente.

Ejemplo con animación predefinida:

Este ejemplo utiliza animate-bounce, lo que hace que el elemento "rebote" constantemente.

Referencia: Animaciones en Tailwind

2. Creación de animaciones personalizadas #

Para crear animaciones personalizadas en Tailwind, necesitas definir las keyframes (fotogramas clave) y asociarlas a una clase de animación personalizada en el archivo tailwind.config.js.

Paso 1: Definir los keyframes en tailwind.config.js: #

1module.exports = {
2  theme: {
3    extend: {
4      keyframes: {
5        wiggle: {
6          '0%, 100%': { transform: 'rotate(-3deg)' },
7          '50%': { transform: 'rotate(3deg)' },
8        },
9      },
10      animation: {
11        wiggle: 'wiggle 1s ease-in-out infinite',
12      },
13    },
14  },
15}

En este ejemplo, definimos la animación personalizada wiggle, que rota el elemento a la izquierda y a la derecha continuamente.

Paso 2: Usar la animación personalizada en tus elementos: #

Aquí el elemento se moverá de un lado a otro (efecto "wiggle") utilizando la animación que acabamos de definir.

3. Ejemplos prácticos: Animación de botones y modales #

Ejemplo 1: Animación de botón al hacer hover: #

Este ejemplo crea un botón que cambia de tamaño y color suavemente al pasar el ratón sobre él.

• hover:scale-110: Hace que el botón se agrande ligeramente al pasar el ratón.
• transition-transform: Controla la transición de la transformación de tamaño.

Ejemplo 2: Modal con animación de entrada: #

Este ejemplo muestra cómo un modal puede aparecer con una animación de desvanecimiento al ser mostrado.

Aquí:

• transform transition-all ease-out duration-300 opacity-0 scale-95: Aplica una transformación de tamaño y opacidad cuando el modal aparece.
• Interactividad: Puedes controlar cuándo mostrar el modal ajustando la visibilidad y animación con JavaScript, activando el cambio en opacity y scale para suavizar la entrada del modal.

Referencia: Documentación de animaciones en Tailwind