Transition property selection in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a transition on the background color.

Tailwind

<button class="transition [1] duration-500 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Drag options to blanks, or click blank then click option'

Atransition-shadow

Btransition-opacity

Ctransition-colors

Dtransition-transform

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity when background color changes

Using transition-transform which affects movement, not color

The transition-colors class applies transitions to color-related properties like background color.

2fill in blank

medium

Complete the code to apply a transition on the transform property.

Tailwind

<div class="transform hover:scale-110 [1] duration-300">
  Hover me
</div>

Drag options to blanks, or click blank then click option'

Atransition-opacity

Btransition-transform

Ctransition-colors

Dtransition-shadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-colors when transform changes

Using transition-opacity which affects transparency

The transition-transform class applies transitions to transform properties like scaling.

3fill in blank

hard

Fix the error in the code to apply a transition on the shadow property.

Tailwind

<button class="shadow-lg hover:shadow-xl [1] duration-400">
  Shadow Button
</button>

Drag options to blanks, or click blank then click option'

Atransition-shadow

Btransition-opacity

Ctransition-colors

Dtransition-transform

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-colors for shadow changes

Using transition-opacity which does not affect shadows

The transition-shadow class applies transitions to shadow properties.

4fill in blank

hard

Fill both blanks to apply transitions on both color and transform properties.

Tailwind

<div class="transform hover:text-red-500 hover:rotate-6 [1] [2] duration-500">
  Rotate and Color
</div>

Drag options to blanks, or click blank then click option'

Atransition-colors

Btransition-opacity

Ctransition-transform

Dtransition-shadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity instead of transition-transform

Missing one of the transition classes

Use transition-colors for color changes and transition-transform for rotation.

5fill in blank

hard

Fill all three blanks to apply transitions on color, shadow, and transform properties.

Tailwind

<button class="transform hover:bg-green-600 hover:shadow-2xl hover:scale-105 [1] [2] [3] duration-700 text-white font-semibold py-3 px-6 rounded">
  Fancy Button
</button>

Drag options to blanks, or click blank then click option'

Atransition-shadow

Btransition-colors

Ctransition-transform

Dtransition-opacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity which does not affect these properties

Forgetting one of the transition classes

Use transition-colors for background color, transition-shadow for shadow, and transition-transform for scaling.

Practice

1. Which Tailwind class controls the transition of background color only?

easy

A. transition-all

B. transition-opacity

C. transition-transform

D. transition-colors

Solution

1. Step 1: Understand Tailwind transition classes

   Tailwind provides specific classes to control which CSS properties transition smoothly, such as background color, opacity, or transform.

2. Step 2: Identify the class for background color transition

   The class transition-colors specifically targets background color changes for smooth animation.

3. Final Answer:

   transition-colors -> Option D

4. Quick Check:

   Background color transition = transition-colors [OK]

Hint: Background color transitions use transition-colors class [OK]

Common Mistakes:

• Confusing transition-colors with transition-opacity
• Using transition-all when only background is needed
• Assuming transition-transform affects background

2. Which of these is the correct Tailwind class to transition opacity?

easy

A. transition-opacity

B. transition-opacity-100

C. opacity-transition

D. transition-op

Solution

1. Step 1: Recall Tailwind transition syntax

   Tailwind uses the format transition-[property] to specify which CSS property to animate.

2. Step 2: Match the correct class for opacity

   The correct class for opacity transition is transition-opacity. Other options are invalid or do not exist in Tailwind.

3. Final Answer:

   transition-opacity -> Option A

4. Quick Check:

   Opacity transition class = transition-opacity [OK]

Hint: Opacity transitions use transition-opacity exactly [OK]

Common Mistakes:

• Adding extra suffixes like -100
• Reversing words to opacity-transition
• Using incomplete or shortened forms

3. What will happen if you use class="transition-transform duration-500 ease-in-out" on a button that changes scale on hover?

medium

A. The button changes scale instantly without animation

B. The button fades opacity instead of scaling

C. The button scales smoothly over 0.5 seconds with easing

D. The button moves position but does not scale

Solution

1. Step 1: Understand transition-transform usage

   The class transition-transform enables smooth animation for CSS transform properties like scale, rotate, or translate.

2. Step 2: Analyze duration and easing effect

   The duration-500 sets the animation time to 500 milliseconds, and ease-in-out controls the speed curve for smooth start and end.

3. Final Answer:

   The button scales smoothly over 0.5 seconds with easing -> Option C

4. Quick Check:

   transition-transform + duration + easing = smooth scale [OK]

Hint: transition-transform animates scale smoothly with duration [OK]

Common Mistakes:

• Expecting instant scale without transition
• Confusing transform with opacity transition
• Ignoring duration or easing effects

4. You wrote class="transition-colors duration-300" but the background color changes instantly. What is the likely problem?

medium

A. transition-colors does not exist in Tailwind

B. You forgot to add a hover or focus state to trigger the transition

C. Duration must be set to 1000 or more for background

D. You need to add transition-opacity as well

Solution

1. Step 1: Check if transition trigger is present

   Transitions animate changes between states. Without a state change like hover or focus, no animation occurs.

2. Step 2: Confirm class correctness and duration

   transition-colors is valid and duration-300 sets 300ms duration, which is enough. Missing trigger is the issue.

3. Final Answer:

   You forgot to add a hover or focus state to trigger the transition -> Option B

4. Quick Check:

   Transition needs state change trigger [OK]

Hint: Transitions need hover/focus to animate changes [OK]

Common Mistakes:

• Assuming transition works without state change
• Thinking duration must be very long
• Adding unrelated transition-opacity class

5. You want to animate both background color and opacity smoothly on hover. Which Tailwind class combination is correct?

hard

A. transition-all duration-700 ease-linear

B. transition-bg-opacity duration-700 ease-linear

C. transition-colors transition-opacity duration-700 ease-linear

D. transition-opacity-bg duration-700 ease-linear

Solution

1. Step 1: Understand combining multiple transition properties

   Tailwind does not support chaining multiple transition-property classes like transition-colors and transition-opacity together.

2. Step 2: Use transition-all for multiple properties

   To animate both background color and opacity, transition-all covers all properties, including these two, with one class.

3. Final Answer:

   transition-all duration-700 ease-linear -> Option A

4. Quick Check:

   Multiple properties transition = transition-all [OK]

Hint: Use transition-all to animate multiple properties together [OK]

Common Mistakes:

• Trying to combine multiple transition-property classes
• Using non-existent combined classes like transition-bg-opacity
• Forgetting transition-all covers all properties