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.

Practice

1. What does the Tailwind class duration-700 control in an animation?

easy

A. The color of the animated element

B. The size of the animated element

C. The delay before the animation starts

D. The length of time the animation takes to complete

Solution

1. Step 1: Understand the purpose of duration classes

   In Tailwind, duration classes like duration-700 set how long an animation runs in milliseconds.

2. Step 2: Identify what duration-700 means

   The number 700 means 700 milliseconds, so the animation takes 0.7 seconds to finish.

3. Final Answer:

   The length of time the animation takes to complete -> Option D

4. Quick Check:

   Duration controls animation time = B [OK]

Hint: Duration classes set animation time in ms, like duration-700 means 700ms [OK]

Common Mistakes:

• Confusing duration with delay
• Thinking duration changes color or size
• Mixing duration with timing curve

2. Which Tailwind class correctly applies an ease-in-out timing curve to an animation?

easy

A. ease-in-out

B. duration-in-out

C. timing-ease-in-out

D. animate-ease-in-out

Solution

1. Step 1: Recall Tailwind timing curve class names

   Tailwind uses simple class names like ease-in, ease-out, and ease-in-out to set timing curves.

2. Step 2: Identify the correct class for ease-in-out

   The correct class is exactly ease-in-out. Other options are invalid or do not exist.

3. Final Answer:

   ease-in-out -> Option A

4. Quick Check:

   Timing curve class = ease-in-out = D [OK]

Hint: Timing curves use ease-in, ease-out, ease-in-out exactly [OK]

Common Mistakes:

• Adding extra prefixes like duration- or timing-
• Using animate- prefix incorrectly
• Confusing timing curve with duration

3. What will be the total animation time for an element with classes duration-300 ease-linear?

medium

A. 500 milliseconds with an ease-in speed

B. 300 milliseconds with a constant speed

C. 300 seconds with a slow start

D. No animation because ease-linear is invalid

Solution

1. Step 1: Understand duration-300 meaning

   The class duration-300 sets the animation length to 300 milliseconds (0.3 seconds).

2. Step 2: Understand ease-linear timing curve

   ease-linear means the animation speed is constant from start to end, no acceleration or slowing.

3. Final Answer:

   300 milliseconds with a constant speed -> Option B

4. Quick Check:

   duration-300 + ease-linear = 300ms constant speed [OK]

Hint: Duration sets time, ease-linear means steady speed [OK]

Common Mistakes:

• Confusing milliseconds with seconds
• Thinking ease-linear means slow start
• Believing ease-linear is invalid

4. You wrote class="duration-500 ease-inout" but the animation speed is not smooth. What is the error?

medium

A. The class should be ease-in-out with dashes

B. Duration must be in seconds, not milliseconds

C. You need to add animate- prefix to the class

D. The class ease-inout is correct and the problem is elsewhere

Solution

1. Step 1: Check the timing curve class spelling

   The correct Tailwind class for this timing curve is ease-in-out with dashes between words.

2. Step 2: Understand why ease-inout fails

   Without dashes, Tailwind does not recognize the class, so no timing curve is applied, causing animation issues.

3. Final Answer:

   The class should be ease-in-out with dashes -> Option A

4. Quick Check:

   Correct timing curve class = ease-in-out [OK]

Hint: Timing curve classes need exact dashes, like ease-in-out [OK]

Common Mistakes:

• Missing dashes in timing curve class
• Using wrong units for duration
• Adding unnecessary prefixes

5. You want an animation that starts slowly, speeds up, then slows down again over 1 second. Which Tailwind classes should you use?

hard

A. duration-1000 ease-in

B. duration-100 ease-linear

C. duration-1000 ease-in-out

D. duration-500 ease-out

Solution

1. Step 1: Identify the needed animation duration

   The animation should last 1 second, so duration-1000 (1000 milliseconds) is correct.

2. Step 2: Choose the timing curve for slow start and end

   ease-in-out timing curve starts slow, speeds up in the middle, then slows down at the end, matching the requirement.

3. Final Answer:

   duration-1000 ease-in-out -> Option C

4. Quick Check:

   1s duration + ease-in-out curve = A [OK]

Hint: Use duration-1000 with ease-in-out for slow start and end [OK]

Common Mistakes:

• Choosing too short duration
• Using ease-linear which is constant speed
• Using only ease-in or ease-out which don't slow both ends