Transition property selection in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class applies a transition only to the background color?

Select the Tailwind CSS class that will make only the background color smoothly change when it updates.

A transition-transform

B transition-opacity

C transition-colors

D transition-shadow

💡 Hint

Think about which property controls color changes in Tailwind transitions.

The transition-colors class applies transitions only to color-related properties like background-color and color. Other classes target different CSS properties.

🧠 Conceptual

intermediate

What does the Tailwind class transition-all do?

Choose the correct description of what transition-all does in Tailwind CSS.

A Applies transition to all animatable CSS properties

B Applies transition only to the <code>all</code> CSS property (which does not exist)

C Applies transition only to the <code>transform</code> property

D Disables all transitions

💡 Hint

Think about what 'all' means in CSS transitions.

The transition-all class applies transitions to all CSS properties that can be animated, making any change smooth.

📝 Syntax

advanced

Which Tailwind class is correct to transition only the transform property?

Identify the correct Tailwind CSS class that applies transition only to the transform property.

A transition-transform

B transition-transforms

C transition-transforming

D transition-transformer

💡 Hint

Tailwind uses exact property names in its transition classes.

The correct class is transition-transform. Other options are invalid Tailwind classes and will not work.

❓ rendering

advanced

What visual effect will the class transition-opacity duration-500 produce on an element?

Choose the correct description of the visual effect when an element with these classes changes its opacity.

Tailwind

<div class="transition-opacity duration-500 opacity-100 hover:opacity-50 bg-blue-500 text-white p-4 rounded">Hover me</div>

A The element instantly changes opacity with no smooth effect

B The element changes background color smoothly over 0.5 seconds on hover

C The element moves position smoothly over 0.5 seconds on hover

D The element fades smoothly from fully visible to half transparent over 0.5 seconds on hover

💡 Hint

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

The transition-opacity class makes opacity changes smooth. The duration-500 sets the time to 0.5 seconds. So on hover, the opacity changes smoothly from 1 to 0.5.

❓ accessibility

expert

Which Tailwind transition class combination best supports users who prefer reduced motion?

Select the Tailwind CSS approach that respects users' reduced motion settings while applying transitions.

A Use <code>motion-reduce:transition-all</code> and <code>motion-safe:transition-none</code>

B Use <code>transition-all</code> with <code>motion-safe:transition-all</code> and <code>motion-reduce:transition-none</code>

C Use only <code>transition-all</code> without any motion preference classes

D Use <code>transition-none</code> always to disable transitions

💡 Hint

Consider how Tailwind handles user motion preferences with special variants.

Tailwind provides motion-safe and motion-reduce variants to respect user preferences. Using motion-safe:transition-all enables transitions only if the user allows motion, and motion-reduce:transition-none disables transitions if the user prefers reduced motion.