Duration and timing curves in Tailwind - Mini Project: Build & Apply

Animating a Button with Duration and Timing Curves in Tailwind CSS

📖 Scenario: You want to create a button on a webpage that smoothly changes color when you hover over it. This makes the button feel lively and interactive, just like a real button you press.

🎯 Goal: Build a simple webpage with a button that changes its background color smoothly on hover using Tailwind CSS. You will control how long the color change takes and how the speed of the change feels over time.

📋 What You'll Learn

Use Tailwind CSS classes to style the button

Set the animation duration to 700 milliseconds

Use the 'ease-in-out' timing curve for smooth start and end

Add a hover effect that changes the button background color

Ensure the button is accessible with a clear label

💡 Why This Matters

🌍 Real World

Buttons with smooth hover animations improve user experience on websites by giving clear visual feedback.

💼 Career

Web developers often use Tailwind CSS to quickly style interactive elements with consistent animations and timing controls.

1

Create the HTML button element

Write an HTML <button> element with the text Click Me inside a <main> section. Give the button the Tailwind classes bg-blue-500 for background color, text-white for text color, px-6 for horizontal padding, and py-3 for vertical padding.

Tailwind

Hint

Use a <button> tag inside <main>. Add the exact Tailwind classes for color and padding.

2

Add hover background color change

Add the Tailwind class hover:bg-blue-700 to the existing button to change its background color to a darker blue when hovered.

Tailwind

   
    Click Me
  

Hint

Add the hover class exactly as hover:bg-blue-700 inside the button's class attribute.

3

Set the animation duration to 700ms

Add the Tailwind class duration-700 to the button to make the background color change take 700 milliseconds.

Tailwind

   
    Click Me
  

Hint

Use the class duration-700 to set the animation time to 700ms.

4

Add the ease-in-out timing curve

Add the Tailwind class ease-in-out to the button to make the color change start slow, speed up, then slow down smoothly.

Tailwind

   
    Click Me
  

Hint

Add the class ease-in-out to control the speed curve of the animation.

Practice

1. What does the Tailwind class duration-700 control in an animation?

easy

A. The color of the animated element

B. The size of the animated element

C. The delay before the animation starts

D. The length of time the animation takes to complete

Solution

1. Step 1: Understand the purpose of duration classes

   In Tailwind, duration classes like duration-700 set how long an animation runs in milliseconds.

2. Step 2: Identify what duration-700 means

   The number 700 means 700 milliseconds, so the animation takes 0.7 seconds to finish.

3. Final Answer:

   The length of time the animation takes to complete -> Option D

4. Quick Check:

   Duration controls animation time = B [OK]

Hint: Duration classes set animation time in ms, like duration-700 means 700ms [OK]

Common Mistakes:

• Confusing duration with delay
• Thinking duration changes color or size
• Mixing duration with timing curve

2. Which Tailwind class correctly applies an ease-in-out timing curve to an animation?

easy

A. ease-in-out

B. duration-in-out

C. timing-ease-in-out

D. animate-ease-in-out

Solution

1. Step 1: Recall Tailwind timing curve class names

   Tailwind uses simple class names like ease-in, ease-out, and ease-in-out to set timing curves.

2. Step 2: Identify the correct class for ease-in-out

   The correct class is exactly ease-in-out. Other options are invalid or do not exist.

3. Final Answer:

   ease-in-out -> Option A

4. Quick Check:

   Timing curve class = ease-in-out = D [OK]

Hint: Timing curves use ease-in, ease-out, ease-in-out exactly [OK]

Common Mistakes:

• Adding extra prefixes like duration- or timing-
• Using animate- prefix incorrectly
• Confusing timing curve with duration

3. What will be the total animation time for an element with classes duration-300 ease-linear?

medium

A. 500 milliseconds with an ease-in speed

B. 300 milliseconds with a constant speed

C. 300 seconds with a slow start

D. No animation because ease-linear is invalid

Solution

1. Step 1: Understand duration-300 meaning

   The class duration-300 sets the animation length to 300 milliseconds (0.3 seconds).

2. Step 2: Understand ease-linear timing curve

   ease-linear means the animation speed is constant from start to end, no acceleration or slowing.

3. Final Answer:

   300 milliseconds with a constant speed -> Option B

4. Quick Check:

   duration-300 + ease-linear = 300ms constant speed [OK]

Hint: Duration sets time, ease-linear means steady speed [OK]

Common Mistakes:

• Confusing milliseconds with seconds
• Thinking ease-linear means slow start
• Believing ease-linear is invalid

4. You wrote class="duration-500 ease-inout" but the animation speed is not smooth. What is the error?

medium

A. The class should be ease-in-out with dashes

B. Duration must be in seconds, not milliseconds

C. You need to add animate- prefix to the class

D. The class ease-inout is correct and the problem is elsewhere

Solution

1. Step 1: Check the timing curve class spelling

   The correct Tailwind class for this timing curve is ease-in-out with dashes between words.

2. Step 2: Understand why ease-inout fails

   Without dashes, Tailwind does not recognize the class, so no timing curve is applied, causing animation issues.

3. Final Answer:

   The class should be ease-in-out with dashes -> Option A

4. Quick Check:

   Correct timing curve class = ease-in-out [OK]

Hint: Timing curve classes need exact dashes, like ease-in-out [OK]

Common Mistakes:

• Missing dashes in timing curve class
• Using wrong units for duration
• Adding unnecessary prefixes

5. You want an animation that starts slowly, speeds up, then slows down again over 1 second. Which Tailwind classes should you use?

hard

A. duration-1000 ease-in

B. duration-100 ease-linear

C. duration-1000 ease-in-out

D. duration-500 ease-out

Solution

1. Step 1: Identify the needed animation duration

   The animation should last 1 second, so duration-1000 (1000 milliseconds) is correct.

2. Step 2: Choose the timing curve for slow start and end

   ease-in-out timing curve starts slow, speeds up in the middle, then slows down at the end, matching the requirement.

3. Final Answer:

   duration-1000 ease-in-out -> Option C

4. Quick Check:

   1s duration + ease-in-out curve = A [OK]

Hint: Use duration-1000 with ease-in-out for slow start and end [OK]

Common Mistakes:

• Choosing too short duration
• Using ease-linear which is constant speed
• Using only ease-in or ease-out which don't slow both ends