Duration and timing curves in Tailwind - Browser Rendering Trace

Render Flow - Duration and timing curves

[Read Tailwind class] -> [Parse duration and timing] -> [Apply CSS transition-duration and transition-timing-function] -> [Trigger animation on property change] -> [Browser animates element smoothly]

The browser reads Tailwind classes for duration and timing, converts them to CSS transition properties, then animates the element smoothly when a property changes.

Render Steps - 3 Steps

Code Added:class="bg-blue-500 text-white px-4 py-2 rounded"

Before

[ ] (empty page)

→

After

[Button: blue background, white text, padding, rounded corners]

Added a styled button with blue background, white text, padding, and rounded corners.

🔧 Browser Action:Creates DOM element and applies base styles

Code Sample

A blue button that smoothly changes background color over 0.5 seconds with an ease-in-out timing curve on hover.

Tailwind

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

Tailwind

/* Tailwind generated CSS */
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Render Quiz - 3 Questions

After applying step 2, what visual behavior does the button have when hovered?

A Background color changes smoothly over 0.5 seconds with ease-in-out timing

B Background color changes instantly with no animation

C Button fades out slowly

D Button moves position smoothly

Common Confusions - 3 Topics

Why doesn't my button animate instantly when I add the hover class?

Because the transition properties (duration and timing) must be set before the hover state to tell the browser how to animate the change. See step 2 where transition classes prepare the animation.

💡 Always add transition classes on the base element, not only on hover.

Why does the animation feel too fast or too slow?

The duration class controls speed. For example, duration-500 means 500 milliseconds. Adjust this value to speed up or slow down the animation as in step 2.

💡 Use duration classes like duration-300 or duration-700 to control animation speed.

What does the ease-in-out timing curve do visually?

It makes the animation start slow, speed up in the middle, then slow down at the end, creating a smooth natural feel. See step 2 for the timing function applied.

💡 Try different timing classes like ease-linear or ease-in to see different animation feels.

Property Reference

Property	Tailwind Class	Value Applied	Visual Effect	Common Use
transition-duration	duration-500	500ms	Controls how long the transition animation lasts	Smooth changes over half a second
transition-timing-function	ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)	Controls the speed curve of the animation	Smooth start and end of animation
transition-property	transition	background-color, border-color, color, fill, stroke, opacity, box-shadow, transform	Specifies which properties animate	Animate common visual changes

Concept Snapshot

Duration and timing curves control how CSS transitions animate. Use duration-{time} classes to set animation length (e.g., duration-500 = 500ms). Use timing classes like ease-in-out for smooth speed curves. Add transition class to specify which properties animate. Together, they create smooth, natural animations on property changes.

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