Hover & Transitions
Hover States
Tailwind ផ្តល់ hover state utilities ដើម្បីបង្កើត interactive effects នៅពេល cursor ស្ថិតលើ element។
🎨 Hover Color Changes
| Hover Type | Class Pattern | Example | Effect |
|---|---|---|---|
| Background | hover:bg-{color}-{shade} |
hover:bg-blue-700 |
Change background on hover |
| Text | hover:text-{color}-{shade} |
hover:text-red-600 |
Change text color on hover |
| Border | hover:border-{color}-{shade} |
hover:border-green-500 |
Change border color on hover |
| Shadow | hover:shadow-{size} |
hover:shadow-lg |
Increase shadow on hover |
| Opacity | hover:opacity-{value} |
hover:opacity-80 |
Change transparency on hover |
🔄 Hover Transforms
| Transform Type | Classes | Visual Effect | Use Case |
|---|---|---|---|
| Scale Up | hover:scale-105, hover:scale-110, hover:scale-125 |
Grow element by 5%, 10%, or 25% | Cards, images, buttons |
| Scale Down | hover:scale-95, hover:scale-90, hover:scale-75 |
Shrink element | Click/press effects |
| Translate Y | hover:-translate-y-1, hover:-translate-y-2 |
Move up slightly | Lift effect on hover |
| Translate X | hover:translate-x-1, hover:translate-x-2 |
Move left/right | Slide effects |
| Rotate | hover:rotate-3, hover:rotate-6, hover:rotate-12 |
Rotate element | Fun, playful interactions |
| Skew | hover:skew-x-3, hover:skew-y-3 |
Skew/slant element | Dynamic effects |
⭐ Common Hover Patterns
| Pattern Name | Classes Combined | Effect |
|---|---|---|
| Button Lift | hover:-translate-y-1 hover:shadow-lg |
Button rises with shadow |
| Card Scale | hover:scale-105 hover:shadow-xl |
Card grows with deeper shadow |
| Image Zoom | hover:scale-110 overflow-hidden |
Image zooms within container |
| Brightness | hover:brightness-110 |
Lighten image/element |
| Grayscale Removal | grayscale hover:grayscale-0 |
Color appears on hover |
🎯 Focus States
Focus states for keyboard navigation and form inputs:
| Focus Type | Class | Use Case |
|---|---|---|
| Outline None | focus:outline-none |
Remove default browser outline |
| Ring | focus:ring-2 focus:ring-blue-500 |
Custom focus indicator (accessible) |
| Border | focus:border-blue-500 |
Change border color on focus |
| Ring Offset | focus:ring-2 focus:ring-offset-2 |
Ring with space from element |
| Background | focus:bg-blue-50 |
Highlight background on focus |
👆 Active States
Active states for click/press effects:
| Active Effect | Class | Visual Result |
|---|---|---|
| Scale Down | active:scale-95 |
Button press effect |
| Darken | active:bg-blue-800 |
Darker while clicking |
| Shadow Reduction | active:shadow-sm |
Pressed into page effect |
⏱️ Transition Duration
| Class | Duration | CSS Value | Use Case |
|---|---|---|---|
duration-75 |
75ms | transition-duration: 75ms; |
Very fast, subtle |
duration-100 |
100ms | transition-duration: 100ms; |
Fast clicks |
duration-150 |
150ms | transition-duration: 150ms; |
Default (recommended) |
duration-200 |
200ms | transition-duration: 200ms; |
Standard buttons |
duration-300 |
300ms | transition-duration: 300ms; |
Smooth animations |
duration-500 |
500ms | transition-duration: 500ms; |
Slow, noticeable |
duration-700 |
700ms | transition-duration: 700ms; |
Very slow |
duration-1000 |
1000ms (1s) | transition-duration: 1000ms; |
Full second transition |
📈 Transition Timing (Easing Functions)
| Class | CSS Value | Animation Curve | Best For |
|---|---|---|---|
ease-linear |
linear |
Constant speed (no acceleration) | Loading spinners, continuous motion |
ease-in |
cubic-bezier(0.4, 0, 1, 1) |
Slow start → Fast end | Elements leaving screen |
ease-out |
cubic-bezier(0, 0, 0.2, 1) |
Fast start → Slow end | Elements entering screen (most common) |
ease-in-out |
cubic-bezier(0.4, 0, 0.2, 1) |
Slow start → Fast middle → Slow end | Smooth, balanced animations |
✨ Built-in Animations
| Class | Animation | Visual Effect | Common Use |
|---|---|---|---|
animate-spin |
360° rotation (1s linear infinite) | 🔄 Continuous spin | Loading spinners |
animate-ping |
Scale & fade out (1s cubic-bezier infinite) | 📡 Radar ping effect | Notification badges, alerts |
animate-pulse |
Opacity fade in/out (2s cubic-bezier infinite) | 💫 Breathing effect | Skeleton loaders, placeholders |
animate-bounce |
Vertical bounce (1s infinite) | ⬆️⬇️ Bouncing motion | Scroll indicators, attention grabbers |
animate-none |
Remove animation | Stop animation | Disable animations conditionally |
🎭 Group Hover
Parent hover affecting children:
| Pattern | HTML Structure | Effect |
|---|---|---|
| Group Hover | <div class="group"><p class="group-hover:text-blue-500"> |
Child changes when parent hovered |
| Peer Hover | <div class="peer"><p class="peer-hover:visible"> |
Sibling changes when peer hovered |
✅ Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use 150-300ms for most transitions | Use >500ms (feels sluggish) |
Add transition class for smooth changes |
Forget transition class (hover will be instant) |
Use ease-out for entering elements |
Use linear for organic motion |
| Combine hover effects (scale + shadow) | Overdo animations (distracting) |
| Always include focus states for accessibility | Remove focus outlines without replacement |
| Test on touch devices (no hover) | Rely only on hover for critical info |
Use active: for button press feedback |
Leave buttons with no active state |