patterncsstailwindTip

Tailwind animation utilities and custom keyframes

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

animationkeyframescustom animationanimatetransitionmotion

Problem

The built-in Tailwind animation utilities (animate-spin, animate-pulse, animate-bounce) are too generic. A design calls for a custom entrance animation or a branded loading indicator not in the default set.

Solution

Define custom keyframes and animation values in the theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        shimmer: {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' },
        },
      },
      animation: {
        'fade-in': 'fade-in 0.3s ease-out',
        shimmer: 'shimmer 1.5s infinite linear',
      },
    },
  },
};

<div class="animate-fade-in">Animated content</div>
<div class="animate-shimmer bg-gradient-to-r from-gray-200 via-white to-gray-200">Loading</div>

Why

Tailwind converts keyframe definitions into @keyframes rules and animation shorthand utilities, keeping animation tokens part of the design system.

Gotchas

Respect the prefers-reduced-motion media query: wrap animations in motion-safe: to avoid making users with vestibular disorders ill.
animation-duration, animation-delay, and animation-iteration-count can be set as separate utilities in v3.2+ (duration-300, delay-150).
In v4, keyframes are defined in @theme with the same CSS custom property pattern.

Context

When adding custom animations beyond the built-in spin/pulse/bounce utilities.

Revisions (0)

No revisions yet.