Duration and timing curves in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a transition duration of 500 milliseconds using Tailwind CSS.

Tailwind

<button class="transition [1]">Click me</button>

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

Aduration-200

Bduration-50

Cduration-1000

Dduration-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using a duration class with the wrong number like duration-1000 instead of duration-500.

Forgetting to include the 'transition' class to enable transitions.

The class duration-500 sets the transition duration to 500 milliseconds in Tailwind CSS.

2fill in blank

medium

Complete the code to apply an ease-in-out timing curve to the transition using Tailwind CSS.

Tailwind

<div class="transition duration-300 [1]">Hover me</div>

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

Aease-in-out

Bease-linear

Cease-in

Dease-out

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing ease-linear which has a constant speed, not easing in and out.

Using ease-in or ease-out which only ease at one end.

The class ease-in-out applies a smooth start and end timing curve to transitions in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply a 700ms transition duration with an ease-out timing curve.

Tailwind

<div class="transition [1] [2]">Animate me</div>

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

Aduration-700

Bease-in

Cease-out

Dduration-300

Attempts:

3 left

💡 Hint

Common Mistakes

Using ease-in instead of ease-out.

Using the wrong duration class like duration-300.

Use duration-700 for 700 milliseconds and ease-out for the timing curve that slows down at the end.

4fill in blank

hard

Fill both blanks to create a button with a 500ms transition duration and a linear timing curve.

Tailwind

<button class="transition [1] [2]">Submit</button>

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

Aduration-500

Bease-in-out

Cease-linear

Dduration-600

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up timing curve classes like using ease-in-out instead of ease-linear.

Choosing the wrong duration class.

duration-500 sets the transition time to 500ms, and ease-linear makes the transition speed constant.

5fill in blank

hard

Fill all three blanks to create a div with a 1000ms transition duration, ease-in timing curve, and a hover scale effect.

Tailwind

<div class="transition [1] [2] hover:[3]">Zoom me</div>

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

Aduration-1000

Bease-in

Cscale-110

Dscale-105

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong scale value like scale-105 instead of scale-110.

Forgetting the hover: prefix for the scale effect.

duration-1000 sets a 1-second transition, ease-in makes it start slow, and hover:scale-110 enlarges the element on hover.