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

Need a 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
      }
    }
  }
};

Need a 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

Need a 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
  


   

Need a hint?

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