Transitions & Animations

Transition and animation utilities for controlling element transitions, timing, and animations.

Transition Property

Specify which CSS properties should transition.

CSS

.transition-none      /* transition-property: none */
.transition           /* transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter */
.transition-all       /* transition-property: all */
.transition-colors    /* transition-property: color, background-color, border-color, text-decoration-color, fill, stroke */
.transition-opacity   /* transition-property: opacity */
.transition-shadow    /* transition-property: box-shadow */
.transition-transform /* transition-property: transform */

Transition Duration

Control the duration of transitions.

CSS

.duration-75    /* 75ms */
.duration-100   /* 100ms */
.duration-150   /* 150ms */
.duration-200   /* 200ms */
.duration-300   /* 300ms */
.duration-500   /* 500ms */
.duration-700   /* 700ms */
.duration-1000  /* 1000ms (1 second) */

Transition Timing

Control the timing function (easing) of transitions.

CSS

.ease-linear     /* linear */
.ease             /* ease (default) */
.ease-in          /* ease-in */
.ease-out         /* ease-out */
.ease-in-out      /* ease-in-out */

Transition Delay

Add a delay before the transition starts.

CSS

.delay-75    /* 75ms delay */
.delay-100   /* 100ms delay */
.delay-150   /* 150ms delay */
.delay-200   /* 200ms delay */
.delay-300   /* 300ms delay */
.delay-500   /* 500ms delay */
.delay-700   /* 700ms delay */
.delay-1000  /* 1000ms delay */

Animations

Built-in animations for common use cases.

CSS

.animate-none   /* animation: none */
.animate-spin   /* spin 1s linear infinite - for loading indicators */
.animate-ping   /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite - for notifications */
.animate-pulse  /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite - for emphasis */
.animate-bounce /* bounce 1s infinite - for attention */

Animation Details

Spin Animation

Continuous rotation animation, perfect for loading indicators.

HTML

<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>

Ping Animation

Scale and fade animation, ideal for notification badges.

HTML

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

Pulse Animation

Opacity pulse animation, great for skeleton loaders.

HTML

<div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>

Bounce Animation

Bouncing animation for drawing attention.

HTML

<div class="animate-bounce">
  ↓ Scroll down
</div>

Responsive Transitions

Apply transition utilities at specific breakpoints.

CSS

/* Responsive transition properties */
.sm:transition .md:transition-all .lg:transition-colors

/* Responsive durations */
.sm:duration-150 .md:duration-300 .lg:duration-500

/* Responsive timing functions */
.sm:ease-in .md:ease-out .lg:ease-in-out

/* Responsive animations */
.sm:animate-pulse .md:animate-bounce .lg:animate-spin

Common Patterns

Button Hover Effect

HTML

<button class="bg-blue-500 text-white px-4 py-2 rounded
               transition-colors duration-200 ease-in-out
               hover:bg-blue-600">
  Hover Me
</button>

Fade In on Hover

HTML

<div class="opacity-0 transition-opacity duration-500 ease-in-out hover:opacity-100">
  Fade in on hover
</div>

Scale Transform

HTML

<div class="transform transition-transform duration-300 ease-out hover:scale-105">
  Scale up on hover
</div>

Card Hover Effect

HTML

<div class="bg-white rounded-lg shadow transition-all duration-300 ease-in-out
            hover:shadow-lg hover:-translate-y-1">
  <h3>Card Title</h3>
  <p>Card content</p>
</div>

Reduced Motion Support

Respect user preferences for reduced motion using motion-reduce utilities.

HTML

<div class="animate-pulse motion-reduce:animate-none">
  This will respect user's motion preferences
</div>