Animaciones y transiciones en CSS

CSS nos permite animar elementos con transitions y animations.

1. Transiciones (transition)

Sirven para suavizar los cambios de propiedades CSS cuando ocurre un evento (como hover o focus).

Propiedades básicas

1. transition-property: La propiedad que cambiará (ej. background-color).
2. transition-duration: Tiempo que tardará (ej. 0.5s).
3. transition-timing-function: Cómo se acelerará (ej. ease-in-out).
4. transition-delay: Retraso antes de empezar (ej. 0.2s).

Ejemplo simple en CSS:

button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: red;
}

👉 Al pasar el mouse, el botón cambia de azul a rojo suavemente.

Ejemplo en Tailwind

En Tailwind usamos transition y clases como duration-500:

<button class="bg-blue-500 hover:bg-red-500 transition duration-500 ease-in-out">
  Cambia de color
</button>

2. Animaciones (@keyframes)

Sirven para crear cambios más complejos con múltiples etapas.

Propiedades básicas

1. animation-name: Nombre de la animación.
2. animation-duration: Duración del ciclo.
3. animation-timing-function: Tipo de aceleración.
4. animation-delay: Retraso antes de empezar.
5. animation-iteration-count: Cuántas veces se repite (infinite para siempre).
6. animation-direction: Dirección del ciclo (alternate, reverse, etc.).

Ejemplo simple en CSS:

@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  animation: mover 1s ease-in-out infinite alternate;
}

👉 La caja se mueve de un lado a otro sin parar.

Ejemplo en Tailwind (usando animate-bounce)

Tailwind tiene animaciones predefinidas como animate-bounce:

<div class="w-10 h-10 bg-red-500 animate-bounce"></div>

👉 La caja roja sube y baja automáticamente.

Propiedades en @keyframes

Dentro de @keyframes, usamos porcentajes (0%, 50%, 100%) o palabras clave (from, to) para definir los pasos de la animación.

1. transform

Permite mover, rotar, escalar o inclinar elementos.

Ejemplo:

@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

👉 El elemento se mueve 100px hacia la derecha.

2. opacity

Controla la transparencia (0 es invisible, 1 es visible).

Ejemplo:

@keyframes aparecer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

👉 El elemento aparece poco a poco.

3. background-color

Cambia el color de fondo.

Ejemplo:

@keyframes colorido {
  0% { background-color: red; }
  100% { background-color: blue; }
}

👉 El fondo cambia de rojo a azul.

4. width, height

Modifica el tamaño del elemento.

Ejemplo:

@keyframes crecer {
  0% { width: 50px; }
  100% { width: 150px; }
}

👉 El elemento se agranda horizontalmente.

5. border-radius

Cambia la forma de un elemento.

Ejemplo:

@keyframes redondear {
  0% { border-radius: 0; }
  100% { border-radius: 50%; }
}

👉 El elemento pasa de ser un cuadrado a un círculo.

6. filter

Aplica efectos visuales como desenfoque o brillo.

Ejemplo:

@keyframes desenfoque {
  0% { filter: blur(0px); }
  100% { filter: blur(5px); }
}

👉 El elemento se ve borroso poco a poco.

Ejemplo completo en CSS:

@keyframes girar {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.cuadro {
  width: 100px;
  height: 100px;
  background-color: green;
  animation: girar 2s linear infinite;
}

👉 El cuadrado gira constantemente.

Ejemplo en Tailwind

Aunque @keyframes no se escribe directamente en Tailwind, podemos usar animate-spin para girar elementos sin código extra:

<div class="w-20 h-20 bg-green-500 animate-spin"></div>

Propiedades avanzadas de @keyframes

7. animation-fill-mode

Define el estado del elemento antes y después de la animación.

Valores principales:

• none (por defecto): No mantiene estilos después de la animación.
• forwards: Mantiene el último estado definido en @keyframes.
• backwards: Aplica el primer estado de @keyframes antes de que inicie la animación.
• both: Combina forwards y backwards.

Ejemplo:

@keyframes aparecer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.caja {
  animation: aparecer 2s ease-out forwards;
}

👉 La caja aparecerá lentamente y mantendrá su estado visible al terminar la animación.

8. animation-iteration-count

Indica cuántas veces se repetirá la animación.

Valores:

• Número (1, 2, 3, etc.).
• infinite: Se repite sin fin.

Ejemplo:

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.texto {
  animation: parpadeo 1s infinite;
}

👉 El texto parpadea continuamente.

En Tailwind, usamos animate-pulse:

<p class="text-lg font-bold animate-pulse">¡Parpadeo infinito!</p>

9. animation-delay

Retrasa el inicio de la animación.

Ejemplo:

@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.caja {
  animation: mover 1s ease-in-out 2s;
}

👉 La animación comienza después de 2 segundos.

10. animation-direction

Controla la dirección de la animación.

Valores:

• normal (por defecto): Se reproduce en orden normal.
• reverse: Se reproduce al revés.
• alternate: Va y vuelve.
• alternate-reverse: Va y vuelve, pero comienza al revés.

Ejemplo:

@keyframes zigzag {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.caja {
  animation: zigzag 1s ease-in-out infinite alternate;
}

👉 La caja se mueve de un lado a otro.

Tailwind y animaciones personalizadas

Tailwind no permite definir @keyframes directamente, pero podemos añadir animaciones personalizadas con @layer.

Ejemplo en Tailwind + CSS personalizado:

<style>
  @keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }

  .animate-rebote {
    animation: rebote 1s infinite;
  }
</style>

<div class="w-16 h-16 bg-blue-500 animate-rebote"></div>

👉 El div azul rebota sin parar.