Tailwindmarkup~30 mins

Animation delay in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Animation Delay with Tailwind CSS

📖 Scenario: You are creating a simple webpage with three colored boxes that animate by fading in one after another. You want to control the delay of each animation so they appear in sequence.

🎯 Goal: Build a webpage with three boxes that fade in with different delays using Tailwind CSS animation delay utilities.

📋 What You'll Learn

Use Tailwind CSS classes for animation and delay

Create three boxes with distinct background colors

Apply fade-in animation to each box

Set different animation delays for each box to appear one after another

Use semantic HTML and ensure accessibility

💡 Why This Matters

🌍 Real World

Animation delays are used in websites to create smooth, engaging visual effects that guide the user's attention.

💼 Career

Knowing how to control animation timing with Tailwind CSS is useful for frontend developers building interactive and polished user interfaces.

Progress0 / 4 steps

Create the HTML structure with three boxes

Create a <main> element with three <div> boxes inside it. Each box should have the classes h-24 and w-24 for height and width, and background colors bg-red-500, bg-green-500, and bg-blue-500 respectively.

Tailwind




  
  
  Animation Delay

Need a hint?

Use three <div> elements inside <main> with the exact classes for size and background color.

Add the fade-in animation class

Add the Tailwind CSS animation class animate-fadeIn to each of the three boxes. You will define this animation in the next step.

Tailwind




  
  
  Animation Delay

Need a hint?

Add the class animate-fadeIn to each box to prepare for the fade-in animation.

Configure animation delay classes

Add Tailwind CSS animation delay classes delay-0, delay-500, and delay-1000 to the red, green, and blue boxes respectively to create a staggered fade-in effect.

Tailwind




  
  
  Animation Delay

Need a hint?

Use the classes delay-0, delay-500, and delay-1000 on the red, green, and blue boxes respectively.

Add custom fade-in animation in Tailwind config

Add a <script> block inside the <head> that uses tailwind.config to extend the animation with a fadeIn keyframe that changes opacity from 0 to 1 over 1 second with ease-in-out timing.

Tailwind




  
  
  Animation Delay

Need a hint?

Use tailwind.config inside a <script> tag to extend the theme with keyframes and animation for fadeIn.