Tailwind Animations Demo

Task 24 - Learn animations with simple examples

Section 1: Built-in Animations

animate-spin

Loading spinner animation

animate-ping

Notification pulse effect

animate-pulse

Skeleton loader effect

👇

animate-bounce

Bounce indicator

Section 2: Interactive Buttons

hover:scale-110

scale + shadow

hover:bg-purple-700

hover:rotate-6

hover:-translate-y-2

scale + lift + shadow

active:scale-95

all effects + duration-500

Section 3: Interactive Cards

🚀

Lift & Shadow

Card lifts up when you hover

hover:shadow-2xl + hover:-translate-y-2
🎨

Scale & Rotate

Card scales and rotates slightly

group-hover:scale-105 + rotate-1
✨

Border Reveal

Blue border appears on hover

hover:border-blue-500

Section 4: Notification Badges

🔔

Bell Icon

Ping animation for notifications

3
💬

Message Icon

Pulse animation on badge

📧

Email Icon

Bounce indicator for new mail

Task 24 - Tailwind Animations Demo

Hover everything to see animations!