Keyframe Animations in Tailwind CSS
From the Tailwind CSS cheat sheet · Transitions & Animations · verified Jul 2026
Keyframe Animations
Built-in and custom keyframe animations.
html
<!-- Built-in animations -->
<div class="animate-spin">Spinning loader</div>
<div class="animate-pulse">Pulsing skeleton</div>
<div class="animate-bounce">Bouncing arrow</div>
<div class="animate-ping">Ping notification</div>💡 animate-pulse is perfect for skeleton loading states — just add it to gray boxes
⚡ animate-ping creates a radar-like ping effect — great for notification badges
📌 Define custom animations in @theme with @keyframes in v4
🟢 Combine with conditionals: show animate-spin while loading, hide when done
animationskeyframesspinpulse
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.