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.