แอนิเมชันคีย์เฟรมในตัว

<!-- Loading spinner using animate-spin -->
<svg class="animate-spin h-5 w-5 text-blue-600"
     xmlns="http://www.w3.org/2000/svg"
     fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
  </path>
</svg>

<!-- Button with spinner -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg" disabled>
  <svg class="animate-spin h-4 w-4" ...></svg>
  Loading...
</button>

<!-- Notification badge with ping effect -->
<div class="relative inline-flex">
  <button class="p-2 rounded-full bg-gray-100">
    <!-- Bell icon -->
    <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
    </svg>
  </button>
  <!-- Ping indicator -->
  <span class="absolute top-0 right-0 -mt-0.5 -mr-0.5">
    <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
  </span>
</div>

<!-- Skeleton loader using animate-pulse -->
<div class="p-6 space-y-4">
  <!-- Avatar + title skeleton -->
  <div class="flex items-center gap-3">
    <div class="animate-pulse bg-gray-200 rounded-full h-10 w-10"></div>
    <div class="space-y-2 flex-1">
      <div class="animate-pulse bg-gray-200 rounded h-4 w-1/3"></div>
      <div class="animate-pulse bg-gray-200 rounded h-3 w-1/4"></div>
    </div>
  </div>
  <!-- Content lines skeleton -->
  <div class="space-y-2">
    <div class="animate-pulse bg-gray-200 rounded h-4 w-full"></div>
    <div class="animate-pulse bg-gray-200 rounded h-4 w-5/6"></div>
    <div class="animate-pulse bg-gray-200 rounded h-4 w-4/5"></div>
  </div>
</div>

<!-- Scroll indicator using animate-bounce -->
<div class="flex flex-col items-center gap-2 mt-16">
  <p class="text-sm text-gray-500">Scroll to explore</p>
  <svg class="animate-bounce w-6 h-6 text-gray-400"
       fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  </svg>
</div>

<!-- Typing indicator (three bouncing dots) -->
<div class="flex gap-1 p-3 bg-gray-100 rounded-2xl rounded-tl-none w-16">
  <div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 0ms"></div>
  <div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 150ms"></div>
  <div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 300ms"></div>
</div>

<!-- Stop animation for reduced-motion users -->
<svg class="animate-spin motion-reduce:animate-none h-5 w-5 text-blue-600">
  ...
</svg>

<!-- Stop animation at large screens -->
<div class="animate-pulse lg:animate-none bg-gray-200 rounded h-4 w-48">
  <!-- Only pulses on mobile/tablet, static on desktop -->
</div>

<!-- JavaScript: remove animation when done -->
<!-- spinner.classList.remove('animate-spin'); -->

// React: conditional rendering for loading state
function UserCard({ user, isLoading }) {
  if (isLoading) {
    return (
      <div class="p-6 space-y-3">
        <div class="animate-pulse bg-gray-200 rounded-full h-12 w-12"></div>
        <div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>
        <div class="animate-pulse bg-gray-200 rounded h-3 w-24"></div>
      </div>
    );
  }

  return (
    <div class="p-6">
      <img src={user.avatar} class="h-12 w-12 rounded-full" />
      <p class="font-semibold mt-3">{user.name}</p>
      <p class="text-gray-500 text-sm">{user.role}</p>
    </div>
  );
}

// tailwind.config.js — add a one-shot animation
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'shake': {
          '0%, 100%': { transform: 'translateX(0)' },
          '20%, 60%': { transform: 'translateX(-6px)' },
          '40%, 80%': { transform: 'translateX(6px)' },
        },
      },
      animation: {
        'shake': 'shake 0.5s ease-in-out 1',  // runs once
      },
    },
  },
};

<!-- Usage -->
<input class="animate-shake border-red-500" type="text" placeholder="Shake on error" />

<!-- Staggered skeleton loaders -->
<ul class="space-y-3">
  <li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 0ms"></li>
  <li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 75ms"></li>
  <li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 150ms"></li>
  <li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 225ms"></li>
</ul>

<!-- Staggered bounce dots -->
<div class="flex gap-1">
  <div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 0ms"></div>
  <div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 150ms"></div>
  <div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 300ms"></div>
</div>

<!-- Animate on mobile, static on desktop -->
<div class="animate-pulse md:animate-none bg-gray-200 rounded h-12 w-full">
  Pulses on mobile, static on md+ screens
</div>

<!-- Spinner only visible on small screens -->
<svg class="animate-spin sm:hidden h-5 w-5 text-blue-600" ...></svg>

<!-- Use different animations at different breakpoints -->
<div class="animate-bounce md:animate-ping lg:animate-spin h-4 w-4 rounded-full bg-green-500">
  Different animation per breakpoint
</div>

<!-- Full loading state with multiple animations -->
<div class="border border-gray-200 rounded-xl p-6">
  <!-- Status indicator -->
  <div class="flex items-center gap-2 mb-4">
    <div class="relative">
      <span class="animate-ping absolute h-3 w-3 rounded-full bg-blue-400 opacity-75"></span>
      <span class="h-3 w-3 rounded-full bg-blue-600 block relative"></span>
    </div>
    <span class="text-sm text-gray-500">Fetching data...</span>
    <svg class="animate-spin h-4 w-4 text-blue-500 ml-auto" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    </svg>
  </div>
  <!-- Skeleton content -->
  <div class="space-y-3">
    <div class="animate-pulse h-4 bg-gray-200 rounded w-3/4"></div>
    <div class="animate-pulse h-4 bg-gray-200 rounded w-1/2"></div>
    <div class="animate-pulse h-4 bg-gray-200 rounded w-5/6"></div>
  </div>
</div>