Transition utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct Tailwind class for a smooth opacity transition

Which Tailwind CSS class will create a smooth transition effect when the opacity property changes?

A transition-opacity

B transition-all

C transition-transform

D transition-delay

💡 Hint

Think about which class targets only opacity changes for transitions.

The transition-opacity class applies transition effects only to the opacity property, making changes smooth when opacity changes.

transition-all affects all properties, transition-transform affects transform only, and transition-delay sets delay but not the transition itself.

🧠 Conceptual

intermediate

Understanding transition duration in Tailwind

What is the effect of applying the class duration-500 in Tailwind CSS?

A Sets the transition delay to 500 milliseconds

B Sets the transition duration to 50 milliseconds

C Sets the transition duration to 500 milliseconds

D Sets the transition timing function to ease-in

💡 Hint

Duration controls how long the transition takes, measured in milliseconds.

The class duration-500 sets the transition duration to 500ms, meaning the transition effect will take half a second to complete.

Delay controls when the transition starts, and timing function controls the speed curve.

❓ rendering

advanced

Predict the visual effect of combined transition classes

Given the following HTML snippet, what will the user see when hovering over the button?

<button class="bg-blue-500 text-white px-4 py-2 rounded transition-colors duration-300 hover:bg-blue-700">Click me</button>

Tailwind

<button class="bg-blue-500 text-white px-4 py-2 rounded transition-colors duration-300 hover:bg-blue-700">Click me</button>

A The button background color smoothly changes from blue-500 to blue-700 over 300ms on hover

B The button text color changes instantly on hover with no transition

C The button background color changes instantly with no transition on hover

D The button fades out slowly when hovered

💡 Hint

Look at which properties the transition applies to and the duration.

The transition-colors class makes color changes animate smoothly. The duration-300 sets the animation to 300ms. On hover, the background color changes from blue-500 to blue-700 smoothly.

Text color does not change, so option A is incorrect. The button does not fade out, so D is wrong.

❓ selector

advanced

Which Tailwind class controls the transition timing function?

You want to make a transition that starts slowly and speeds up at the end. Which Tailwind class should you use to set this timing function?

A linear

B ease-out

C ease-in-out

D ease-in

💡 Hint

Think about how the speed changes during the transition.

The ease-in timing function makes the transition start slowly and speed up towards the end.

ease-out starts fast and slows down, ease-in-out starts and ends slow with faster middle, and linear moves at a constant speed.

❓ accessibility

expert

Ensuring accessible transitions with Tailwind

Which approach best ensures that users who prefer reduced motion do not experience distracting animations when using Tailwind CSS transitions?

A Remove all transition classes from elements to avoid animations

B Use the <code>motion-reduce:transition-none</code> class to disable transitions for users with reduced motion preference

C Use <code>transition-all</code> with very short duration to minimize motion

D Add <code>aria-hidden="true"</code> to elements with transitions

💡 Hint

Tailwind supports special classes for respecting user motion preferences.

The motion-reduce:transition-none class disables transitions for users who have set their system to prefer reduced motion, improving accessibility.

Removing all transitions (B) is not necessary and reduces design quality. Using short durations (C) still animates. Adding aria-hidden (D) hides content from screen readers, which is unrelated.