What is Custom keyframe animations in Tailwind?

Tailwindmarkup~5 mins

Custom keyframe animations in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Custom keyframe animations let you create smooth, unique movements for your webpage elements. They make your site feel lively and fun.

You want a button to gently bounce when hovered.

You want text to fade in with a special effect.

You want an image to spin slowly on the page.

You want a loading spinner with a custom rotation.

You want to animate a background color change smoothly.

Syntax

Tailwind

module.exports = {
  theme: {
    extend: {
      keyframes: {
        customName: {
          '0%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.5)' },
          '100%': { transform: 'scale(1)' },
        },
      },
      animation: {
        customAnimation: 'customName 2s ease-in-out infinite',
      },
    },
  },
}

Define your keyframes inside extend.keyframes with a name and steps.

Then create an animation using that keyframe name inside extend.animation.

Examples

This example makes an element move up and down like a bounce.

Tailwind

keyframes: {
  bounce: {
    '0%, 100%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-10px)' },
  },
},
animation: {
  bounce: 'bounce 1s infinite',
}

This example fades an element from invisible to visible.

Tailwind

keyframes: {
  fadeIn: {
    '0%': { opacity: '0' },
    '100%': { opacity: '1' },
  },
},
animation: {
  fadeIn: 'fadeIn 3s ease forwards',
}

Sample Program

This page shows a blue button that gently grows and shrinks repeatedly using a custom pulse animation.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Keyframe Animation</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          keyframes: {
            pulseScale: {
              '0%, 100%': { transform: 'scale(1)' },
              '50%': { transform: 'scale(1.2)' },
            },
          },
          animation: {
            pulseScale: 'pulseScale 2s ease-in-out infinite',
          },
        },
      },
    };
  </script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="bg-blue-600 text-white px-6 py-3 rounded-lg animate-pulseScale focus:outline-none focus:ring-4 focus:ring-blue-300" aria-label="Pulsing button">
    Click Me
  </button>
</body>
</html>

OutputSuccess

Important Notes

Always give your animations meaningful names to keep your code clear.

Use focus:outline-none and focus:ring classes to keep accessibility when animating interactive elements.

Test animations on different screen sizes to ensure they look good everywhere.

Summary

Custom keyframe animations let you create unique movements for your webpage elements.

Define keyframes and animations inside Tailwind's extend section.

Use the animation class on elements to see your animation in action.