Animaciones

// Transiciones
<button className="transition-colors duration-200 ease-in-out hover:bg-blue-600">
<div className="transition-all duration-300 hover:scale-105 hover:shadow-lg">
<div className="transition-opacity duration-150 opacity-0 data-[visible]:opacity-100">
 
// Animaciones integradas
<div className="animate-spin">    {/* rotación infinita */}
<div className="animate-ping">    {/* pulso estilo radar */}
<div className="animate-pulse">   {/* pulso suave de opacidad */}
<div className="animate-bounce">  {/* rebote */}
 
// Animación personalizada con keyframes
<div className="animate-fade-in">  {/* definida en @theme */}
 
// Movimiento reducido
<div className="motion-safe:animate-bounce motion-reduce:animate-none">

/* globals.css — define animaciones personalizadas */
@import "tailwindcss";
 
@theme {
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
  --animate-scale-in: scale-in 0.2s ease-out;
}
 
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
 
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

"use client";
 
import { useState } from "react";
 
export function AnimatedNotificationList() {
  const [notifications, setNotifications] = useState<
    { id: number; text: string; type: "info" | "success" | "error" }[]
  >([]);
  let nextId = 0;
 
  function addNotification(type: "info" | "success" | "error") {
    const id = ++nextId;
    setNotifications((prev) => [
      ...prev,
      { id, text: `Notificación ${type} #${id}`, type },
    ]);
    setTimeout(() => {
      setNotifications((prev) => prev.filter((n) => n.id !== id));
    }, 3000);
  }
 
  const colors = {
    info: "bg-blue-50 border-blue-200 text-blue-800",
    success: "bg-green-50 border-green-200 text-green-800",
    error: "bg-red-50 border-red-200 text-red-800",
  };
 
  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        <button
          onClick={() => addNotification("info")}
          className="rounded bg-blue-500 px-3 py-1.5 text-sm text-white transition-all duration-200 hover:bg-blue-600 active:scale-95"
        >
          Info
        </button>
        <button
          onClick={() => addNotification("success")}
          className="rounded bg-green-500 px-3 py-1.5 text-sm text-white transition-all duration-200 hover:bg-green-600 active:scale-95"
        >
          Éxito
        </button>
        <button
          onClick={() => addNotification("error")}
          className="rounded bg-red-500 px-3 py-1.5 text-sm text-white transition-all duration-200 hover:bg-red-600 active:scale-95"
        >
          Error
        </button>
      </div>
 
      <div className="fixed top-4 right-4 z-50 flex w-80 flex-col gap-2">
        {notifications.map((n) => (
          <div
            key={n.id}
            className={`animate-slide-in-right rounded-lg border p-3 shadow-lg ${colors[n.type]}`}
          >
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">{n.text}</p>
              <button
                onClick={() => setNotifications((prev) => prev.filter((x) => x.id !== n.id))}
                className="ml-2 text-current opacity-50 transition-opacity hover:opacity-100"
              >
                X
              </button>
            </div>
            {/* Barra de progreso animada */}
            <div className="mt-2 h-0.5 animate-shrink rounded bg-current opacity-30" />
          </div>
        ))}
      </div>
    </div>
  );
}

/* Agrégalos a globals.css */
@theme {
  --animate-slide-in-right: slide-in-right 0.3s ease-out;
  --animate-shrink: shrink 3s linear forwards;
}
 
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
 
@keyframes shrink {
  from { width: 100%; }
  to { width: 0%; }
}

// Propiedades específicas (mejor rendimiento)
<div className="transition-transform duration-300">         {/* solo transform */}
<div className="transition-colors duration-200">            {/* solo propiedades de color */}
<div className="transition-opacity duration-150">           {/* solo opacity */}
<div className="transition-shadow duration-200">            {/* solo box-shadow */}
<div className="transition-[transform,opacity] duration-300"> {/* conjunto personalizado */}

{items.map((item, i) => (
  <div
    key={item.id}
    className="animate-fade-in opacity-0"
    style={{ animationDelay: `${i * 100}ms`, animationFillMode: "forwards" }}
  >
    {item.name}
  </div>
))}

<details className="group rounded border">
  <summary className="cursor-pointer p-4 font-medium">
    Haz clic para expandir
    <span className="ml-2 inline-block transition-transform group-open:rotate-90">
      &#9654;
    </span>
  </summary>
  <div className="overflow-hidden transition-all duration-300 group-open:max-h-96 max-h-0">
    <div className="p-4 pt-0">Contenido oculto aquí</div>
  </div>
</details>

function Skeleton({ className }: { className?: string }) {
  return (
    <div className={`animate-pulse rounded bg-gray-200 dark:bg-gray-700 ${className}`} />
  );
}
 
// Uso
<div className="space-y-3">
  <Skeleton className="h-6 w-3/4" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
</div>

// Retraso de animación como prop
function AnimatedItem({
  delay,
  children,
}: {
  delay: number;
  children: React.ReactNode;
}) {
  return (
    <div
      className="animate-fade-in opacity-0 [animation-fill-mode:forwards]"
      style={{ animationDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
}
 
// Tipado de eventos de transición
function handleTransitionEnd(e: React.TransitionEvent<HTMLDivElement>) {
  if (e.propertyName === "opacity") {
    // Transición de opacidad completada
  }
}