Animation

Utilities for animating elements with CSS animations.


Class reference

ClassProperties
animation-noneanimation: none;
animation-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animation-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
animation-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animation-bounceanimation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } }

# Spin

Add the animate-spin utility to add a linear spin animation to elements like loading indicators.

<button type="button" class="bg-pink-500 ..." disabled>
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing
</button>

# Ping

Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

<span class="flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-300 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-violet-400"></span>
</span>

# Pulse

Add the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

<div class="border border-blue-200 shadow rounded-md p-4 max-w-sm w-full mx-auto">
<div class="animate-pulse flex space-x-4">
<div class="rounded-full bg-blue h-12 w-12"></div>
<div class="flex-1 space-y-4 py-1">
<div class="h-4 bg-blue rounded w-3/4"></div>
<div class="space-y-2">
<div class="h-4 bg-blue rounded"></div>
<div class="h-4 bg-blue rounded w-5/6"></div>
</div>
</div>
</div>
</div>

# Bounce

Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<svg class="animate-bounce w-6 h-6 ...">
<!-- ... -->
</svg>

# Prefers-reduced-motion

You can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<button type="button" class="bg-teal-600 ..." disabled>
<svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing
</button>

Learn more in the state variants documentation.

# Responsive

To change or disable an animation at a specific breakpoint, add a {screen}: prefix to any existing animation utility. For example, use md:animate-none to apply the animate-none utility at only medium screen sizes and above.

<div class="animate-spin md:animate-none ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.