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.

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:

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-600 ease-in-out">
2  Botón con Transición
3</button>

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:

1<div class="animate-bounce bg-red-500 text-white p-4 rounded">
2  Elemento que rebota
3</div>

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

Referencia: Animaciones en Tailwind

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:

1<div class="animate-wiggle bg-yellow-500 text-white p-4 rounded">
2  Elemento con animación personalizada
3</div>

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

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.

1<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transform hover:scale-110 transition-transform duration-300">
2  Botón Animado
3</button>

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.

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

1<button class="mt-4 bg-blue-500 text-white py-2 px-4 rounded" onclick="openModal()">Abrir Modal</button>
2
3<!-- Modal -->
4<div class="fixed z-10 inset-0 overflow-y-auto" id="modal-container">
5  <div class="flex items-center justify-center min-h-screen">
6    <div class="bg-white p-6 rounded-lg shadow-lg transform transition-all modal-transition modal-hide" id="modal">
7      <h2 class="text-lg font-bold">Modal con Animación</h2>
8      <p>Este modal aparece con una animación suave.</p>
9      <button class="mt-4 bg-red-500 text-white py-2 px-4 rounded" onclick="closeModal()">Cerrar</button>
10    </div>
11  </div>
12</div>

1.modal-show {
2    opacity: 1;
3    transform: scale(1);
4  }
5  .modal-hide {
6    opacity: 0;
7    transform: scale(0.95);
8  }
9  .modal-transition {
10    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
11  }
12  /* Ocultar el modal inicialmente */
13  #modal-container {
14    display: none;
15  }
16  /* Fondo oscuro */
17  #modal-container.show {
18    display: block;
19  }

1function openModal() {
2    const modalContainer = document.getElementById('modal-container');
3    const modal = document.getElementById('modal');
4
5    // Mostrar el contenedor de la modal
6    modalContainer.classList.add('show');
7    
8    // Después de una pequeña pausa, se agregan las clases de animación
9    setTimeout(() => {
10      modal.classList.remove('modal-hide');
11      modal.classList.add('modal-show');
12    }, 10); // Pequeña pausa para que se aplique la animación
13  }
14
15  function closeModal() {
16    const modalContainer = document.getElementById('modal-container');
17    const modal = document.getElementById('modal');
18
19    // Animar para ocultar la modal
20    modal.classList.remove('modal-show');
21    modal.classList.add('modal-hide');
22
23    // Después de que la animación termina, ocultar el contenedor
24    setTimeout(() => {
25      modalContainer.classList.remove('show');
26    }, 300); // Coincide con el tiempo de duración de la animación (300ms)
27  }

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

Con estas técnicas, puedes agregar transiciones y animaciones a tu interfaz de usuario de forma sencilla y eficiente, mejorando la experiencia del usuario al hacerla más fluida y atractiva.

Curso de tailwind CSS