How do you implement complex Tailwind CSS animations with keyframes and staggered effects?

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'float-up': {
          '0%': { transform: 'translateY(100%)', opacity: 0 },
          '100%': { transform: 'translateY(0)', opacity: 1 }
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' }
        }
      },
      animation: {
        'float-up': 'float-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        wiggle: 'wiggle 1s infinite'
      }
    }
  }
}
      

<div class="grid grid-cols-3 gap-4 p-8">
  <!-- Staggered entrance -->
  <div class="animate-[float-up_0.5s_ease-out_0s_forwards] opacity-0">
    Card 1
  </div>
  <div class="animate-[float-up_0.5s_ease-out_0.1s_forwards] opacity-0">
    Card 2
  </div>
  <div class="animate-[float-up_0.5s_ease-out_0.2s_forwards] opacity-0">
    Card 3
  </div>
  
  <!-- Hover wiggle -->
  <button class="animate-wiggle hover:animate-none">Wiggle!</button>
</div>