Tailwind CSS Animation Classes

Complete reference for Tailwind CSS animations with live examples.
Click any class to copy it to your clipboard.

Built-in Animations

Spin

A linear 360-degree rotation animation that loops infinitely.

Common Use Cases

Loading spinnersProcessing indicatorsRefresh icons

CSS Output

animation: spin 1s linear infinite;

Keyframes

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Ping

A ping/pulse effect that scales up and fades out, like a radar ping.

Common Use Cases

Notification badgesAttention grabbersLive indicators

CSS Output

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

Keyframes

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

Pulse

A subtle opacity pulse animation for skeleton loaders and placeholders.

Common Use Cases

Skeleton loadersContent placeholdersLoading states

CSS Output

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

Keyframes

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

Bounce

A bouncing animation with easing, perfect for call-to-action elements.

Common Use Cases

Scroll indicatorsDownload arrowsAttention-grabbing CTAs

CSS Output

animation: bounce 1s infinite;

Keyframes

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

Animation Control

Disable Animation

Use animate-none to remove all animations from an element. Useful for disabling animations on hover or at certain breakpoints.

Example: Disable on Hover

<div class="animate-spin hover:animate-none">
  <!-- Stops spinning on hover -->
</div>

Custom Animations (Tailwind v4)

Tailwind v4 supports arbitrary animation values using bracket notation. Define custom keyframes in your CSS and reference them:

1. Define Keyframes in CSS

@keyframes wiggle {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

2. Use Arbitrary Value

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  Wiggling element
</div>

Wiggle Animation

Transition Duration

Control the duration of CSS transitions. Works great with hover effects and state changes.

Class	CSS Output	Preview
	transition-duration: 75ms;
	transition-duration: 100ms;
	transition-duration: 150ms;
	transition-duration: 200ms;
	transition-duration: 300ms;
	transition-duration: 500ms;
	transition-duration: 700ms;
	transition-duration: 1000ms;

Transition Timing Function

Control the easing curve of transitions for more natural-feeling animations.

linear

Hover to preview

cubic-bezier(0.4, 0, 1, 1)

Hover to preview

cubic-bezier(0, 0, 0.2, 1)

Hover to preview

cubic-bezier(0.4, 0, 0.2, 1)

Hover to preview

Transition Delay

Add a delay before transitions start. Great for staggered animations.

Class	CSS Output
	transition-delay: 75ms;
	transition-delay: 100ms;
	transition-delay: 150ms;
	transition-delay: 200ms;
	transition-delay: 300ms;
	transition-delay: 500ms;
	transition-delay: 700ms;
	transition-delay: 1000ms;

Staggered Animation Example

Hover to see staggered animation

<div class="flex gap-4 group">
  <div class="delay-0 group-hover:scale-125">1</div>
  <div class="delay-75 group-hover:scale-125">2</div>
  <div class="delay-150 group-hover:scale-125">3</div>
  <div class="delay-200 group-hover:scale-125">4</div>
  <div class="delay-300 group-hover:scale-125">5</div>
</div>

Combining Animation Classes

Combine transition utilities to create smooth, polished animations.

Button with Transition

<button class="transition-all duration-300 ease-out
  hover:scale-105 hover:shadow-lg">
  Hover Me
</button>

Card with Transition

Hover Card

<div class="transition-all duration-500 ease-in-out
  hover:-translate-y-2 hover:shadow-xl">
  Card Content
</div>

Accessibility: Reduced Motion

Some users prefer reduced motion due to vestibular disorders or personal preference. Use Tailwind's motion-safe: and motion-reduce: variants:

<!-- Only animate if user hasn't enabled reduced motion -->
<div class="motion-safe:animate-bounce">Accessible animation</div>

<!-- Apply alternative styling for reduced motion users -->
<div class="animate-spin motion-reduce:animate-none">Loading...</div>

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect animations, transitions, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →