Duration and timing curves in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's transition duration utility

Which Tailwind class sets the transition duration to 500 milliseconds?

A duration-5

B duration-50

C duration-500

D duration-1500

💡 Hint

Look for the class that matches the number of milliseconds directly.

The class duration-500 sets the transition duration to 500ms. Other options represent different durations.

📝 Syntax

intermediate

Correct Tailwind timing function class for ease-in-out

Which Tailwind class applies the ease-in-out timing function to a transition?

A ease-in-out

B ease-in

C ease-out

D ease-linear

💡 Hint

The class name matches the timing function name exactly.

The class ease-in-out applies the ease-in-out timing function, which starts slow, speeds up, then slows down.

❓ rendering

advanced

Visual effect of different timing curves

You have two buttons with the same transition duration but different timing functions: one uses ease-linear and the other uses ease-in. What difference will you see when hovering over them?

Tailwind

<button class="transition duration-700 ease-linear bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">Linear</button>
<button class="transition duration-700 ease-in bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded">Ease-In</button>

A Both buttons change color at the same speed throughout the transition.

B Both buttons start slow and speed up at the end.

C The ease-in button changes color at a constant speed; the linear button starts slow and speeds up.

D The linear button changes color at a constant speed; the ease-in button starts slow and speeds up.

💡 Hint

Think about how linear and ease-in timing functions affect speed over time.

The ease-linear timing function changes properties at a constant speed. The ease-in timing function starts slow and then speeds up during the transition.

❓ selector

advanced

Choosing the correct Tailwind class for a 1 second transition with ease-out

Which Tailwind class combination correctly applies a 1 second transition duration with an ease-out timing curve?

A transition duration-1000 ease-out

B transition duration-100 ease-out

C transition duration-100 ease-in-out

D transition duration-1000 ease-in

💡 Hint

Duration is in milliseconds; 1 second equals 1000 milliseconds.

The class duration-1000 sets the duration to 1000ms (1 second), and ease-out applies the correct timing curve.

❓ accessibility

expert

Ensuring accessible transition timing for users with motion sensitivity

You want to respect users who prefer reduced motion in their system settings. Which Tailwind approach correctly disables transitions for these users?

Tailwind

<button class="transition duration-500 ease-in-out hover:bg-red-500">Click me</button>

A Add <code>motion-safe:duration-0</code> to the button's class list.

B Add <code>motion-reduce:transition-none</code> to the button's class list.

C Add <code>motion-safe:transition-none</code> to the button's class list.

D Add <code>motion-reduce:duration-0</code> to the button's class list.

💡 Hint

Think about the media query that targets users who want reduced motion.

The motion-reduce prefix applies styles when the user prefers reduced motion. Setting transition-none disables transitions for these users, improving accessibility.