Custom keyframe animations in Tailwind

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>

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.

Practice

1. What is the main purpose of defining custom keyframe animations in Tailwind CSS?

easy

A. To create unique movement effects on webpage elements

B. To change the color palette of the website

C. To add new font families to the project

D. To optimize image loading speed

Solution

1. Step 1: Understand what keyframe animations do

   Keyframe animations define how elements move or change over time.

2. Step 2: Relate to Tailwind's custom animations

   Custom keyframe animations let you create unique movement effects beyond default animations.

3. Final Answer:

   To create unique movement effects on webpage elements -> Option A

4. Quick Check:

   Custom animations = unique movements [OK]

Hint: Think about what animations visually do on a page [OK]

Common Mistakes:

• Confusing animations with color or font changes
• Thinking animations improve loading speed
• Mixing animations with layout changes

2. Which of the following is the correct way to define a custom keyframe animation in Tailwind's tailwind.config.js?

easy

A. "extend: { colors: { bounce: '#000' }, animation: { bounce: 'bounce 1s infinite' } }"

B. "extend: { keyframes: { bounce: { '0%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-25%)' }, '100%': { transform: 'translateY(0)' } } }, animation: { bounce: 'bounce 1s infinite' } }"

C. "extend: { fontFamily: { bounce: ['Arial'] }, animation: { bounce: 'bounce 1s infinite' } }"

D. "extend: { spacing: { bounce: '1rem' }, animation: { bounce: 'bounce 1s infinite' } }"

Solution

1. Step 1: Identify keyframe syntax in Tailwind config

   Keyframes are defined inside extend.keyframes with percentage steps and CSS properties.

2. Step 2: Check animation property linking keyframes

   The animation name and duration are set inside extend.animation.

3. Final Answer:

   extend: { keyframes: { bounce: { '0%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-25%)' }, '100%': { transform: 'translateY(0)' } } }, animation: { bounce: 'bounce 1s infinite' } } -> Option B

4. Quick Check:

   Keyframes + animation property = correct syntax [OK]

Hint: Look for keyframes with percentages and transform properties [OK]

Common Mistakes:

• Defining colors or fonts instead of keyframes
• Missing percentage steps in keyframes
• Not linking animation name to keyframes

3. Given this Tailwind config snippet:

extend: { keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } } }, animation: { fadeIn: 'fadeIn 2s ease-in forwards' } }

What will happen when you add class="animate-fadeIn" to an element?

medium

A. The element will instantly appear without animation

B. The element will slide left to right repeatedly

C. The element will fade out from visible to transparent

D. The element will fade in from transparent to fully visible over 2 seconds

Solution

1. Step 1: Analyze keyframes named fadeIn

   Opacity changes from 0 (invisible) at 0% to 1 (visible) at 100%.

2. Step 2: Understand animation properties

   Animation lasts 2 seconds, easing in, and stays at final state (forwards).

3. Final Answer:

   Element fades in from transparent to visible over 2 seconds -> Option D

4. Quick Check:

   fadeIn keyframes = fade in effect [OK]

Hint: Check opacity changes in keyframes for fade effects [OK]

Common Mistakes:

• Confusing fadeIn with slide animations
• Ignoring animation duration and easing
• Assuming fade out instead of fade in

4. You wrote this Tailwind config for a custom animation:

extend: { keyframes: { spinSlow: { '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' } } }, animation: { spinSlow: 'spinSlow 3s linear infinite' } }

But the animation does not run on your element with class="animate-spinSlow". What is the likely problem?

medium

A. You forgot to restart the development server after changing the config

B. The keyframe percentages must be 0 and 1, not 0% and 100%

C. The animation name in the class should be spin-slow instead of spinSlow

D. Tailwind does not support custom animations

Solution

1. Step 1: Check Tailwind config syntax

   The keyframe and animation syntax is correct with '0%' and '100%' and camelCase names.

2. Step 2: Understand Tailwind build process

   Changes in tailwind.config.js require restarting the development server to apply.

3. Final Answer:

   Forgot to restart the development server after config change -> Option A

4. Quick Check:

   Restart server after config edits [OK]

Hint: Restart dev server after config changes to apply them [OK]

Common Mistakes:

• Using wrong percentage syntax in keyframes
• Wrong animation class name format
• Believing Tailwind can't do custom animations

5. You want to create a custom Tailwind animation that moves an element up 20px and fades it in simultaneously over 1.5 seconds. Which config snippet correctly defines this animation?

hard

A. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(0)', opacity: '1' }, '100%': { transform: 'translateY(20px)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

B. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateX(20px)', opacity: '1' }, '100%': { transform: 'translateX(0)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

C. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

D. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '1' }, '100%': { transform: 'translateY(0)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

Solution

1. Step 1: Identify correct transform and opacity start/end values

   Moving up means translateY from 20px (start) to 0 (end). Fading in means opacity from 0 to 1.

2. Step 2: Match animation timing and properties

   Duration 1.5s, easing ease-out, and forwards to keep final state are correct.

3. Final Answer:

   extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } } -> Option C

4. Quick Check:

   TranslateY 20px to 0 + opacity 0 to 1 = move up fade in [OK]

Hint: Check start/end transform and opacity values carefully [OK]

Common Mistakes:

• Using translateX instead of translateY for vertical movement
• Reversing opacity values (fade out instead of fade in)
• Swapping start and end positions