Animations and Filters
Use built-in animations and filter utilities.
Syntax
class="animate-spin blur-sm grayscale"Tailwind ships a few keyframe animations and CSS filters.
animate-spin— spinner.animate-pulse— loading skeleton.animate-bounce— bounce.blur-sm,grayscale,brightness-110— filters.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer shows a skeleton loading state using animate-pulse on gray placeholder divs while data is being fetched.
- A notification badge bounces once using animate-bounce to draw the user's attention to a new unread message.
- A hero background image is subtly blurred using blur-sm to create depth behind overlaid text without CSS filter code.
More examples
Pulse skeleton loader
animate-pulse applies a fading in-out animation to the gray placeholder bars, creating a skeleton loading state pattern.
<div class="animate-pulse space-y-3">
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
<div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>Bouncing notification dot
animate-bounce makes the red notification dot repeatedly move up and down, drawing attention without requiring any custom CSS keyframes.
<div class="relative inline-block">
<button class="bg-gray-100 p-2 rounded-full">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M15 17H20L18 12V8a6 6 0 10-12 0v4l-2 5h5m4 0a2 2 0 01-4 0"/>
</svg>
</button>
<span class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 rounded-full animate-bounce"></span>
</div>Backdrop blur filter
backdrop-blur-sm blurs only what is behind the overlay div, creating a glassmorphism effect without blurring the overlaid text.
<div class="relative h-48 rounded-xl overflow-hidden">
<img src="bg.jpg" alt="" class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 backdrop-blur-sm bg-white/30 flex items-center justify-center">
<p class="text-white font-bold text-2xl">Glass Pane</p>
</div>
</div>
Discussion