Custom keyframe animations in Tailwind - Mini Project: Build & Apply

Custom Keyframe Animations with Tailwind CSS

📖 Scenario: You want to create a simple web page that shows a box with a smooth color change animation. This animation will make the box change its background color from blue to green and back continuously.

🎯 Goal: Build a web page using Tailwind CSS that includes a custom keyframe animation named colorchange. The animation should smoothly change the background color of a box from blue to green and back in a loop.

📋 What You'll Learn

Create a Tailwind CSS configuration file with a custom keyframe animation named colorchange that changes background color from blue to green and back.

Add a custom animation named colorchange that uses the keyframes with a duration of 4 seconds and infinite looping.

Create an HTML file with a div element styled as a box using Tailwind classes.

Apply the custom colorchange animation to the box so it animates continuously.

💡 Why This Matters

🌍 Real World

Custom animations help make websites more engaging and visually appealing by adding smooth transitions and effects.

💼 Career

Knowing how to extend Tailwind CSS with custom animations is useful for frontend developers to create unique UI experiences without writing raw CSS.

1

Create Tailwind CSS config with colorchange keyframes

Create a Tailwind CSS configuration file named tailwind.config.js. Inside the extend section of theme, add a keyframes object with a key named colorchange. Define the keyframes so that at 0% and 100% the background color is #3b82f6 (blue), and at 50% the background color is #22c55e (green).

Tailwind

// Create tailwind.config.js with extend.theme.keyframes.colorchange
// Your code here

Hint

Remember to put the keyframes inside extend under theme in tailwind.config.js.

2

Add custom animation named colorchange in Tailwind config

In the same tailwind.config.js file, inside the extend section of theme, add an animation object. Define an animation named colorchange that uses the keyframes colorchange with a duration of 4s, timing function ease-in-out, and infinite repetition.

Tailwind

module.exports = {
  theme: {
    extend: {
      keyframes: {
        colorchange: {
          '0%, 100%': { backgroundColor: '#3b82f6' },
          '50%': { backgroundColor: '#22c55e' }
        }
      },
      // Add animation object here
      animation: {
        // Your code here
      }
    }
  }
};

Hint

Define the animation property with the same name as the keyframes and specify duration, easing, and infinite loop.

3

Create HTML file with a box div

Create an HTML file named index.html. Inside the body, add a div element with Tailwind classes w-40 and h-40 to make a square box. Also add rounded-lg for rounded corners and shadow-lg for a subtle shadow.

Tailwind

Hint

Use Tailwind classes to create a visible square box with rounded corners and shadow.

4

Apply the custom colorchange animation to the box

In the index.html file, add the Tailwind class animate-colorchange to the div box so it uses the custom animation you defined.

Tailwind

  
  
  Color Change Animation
  


   

Hint

Just add the animate-colorchange class to the box div.

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