0PricingLogin▼
Tailwind CSS Academy · Lesson

Duration and Easing

Control how long transitions take with duration-75 through duration-1000, and set the timing function with ease-in, ease-out, and ease-in-out.

Duration and Timing in Motion Design

Two properties control how a CSS transition feels: duration (how long the animation takes) and timing function (how the animation accelerates and decelerates over that time). Getting these right is the difference between animations that feel snappy and intentional versus those that feel sluggish or mechanical. Tailwind provides utilities for both, making it easy to tune motion feel without custom CSS.

Duration Utilities

Tailwind's duration-* utilities set the CSS transition-duration property. Values range from duration-75 (75ms, very snappy) to duration-1000 (1000ms, one full second). The default duration when you use transition without a duration-* class is 150ms. Most UI interactions should be under 300ms to feel responsive — longer durations are suitable only for dramatic page-level animations.

<!-- Available duration utilities -->
duration-75    →  75ms
duration-100   → 100ms
duration-150   → 150ms  (default)
duration-200   → 200ms
duration-300   → 300ms
duration-500   → 500ms
duration-700   → 700ms
duration-1000  → 1000ms

<!-- Example: fast button color change -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-150">
  Snappy button
</button>

All lessons in this course

  1. Transition Utilities
  2. Duration and Easing
  3. Built-In Keyframe Animations
  4. Custom Animations in Config
← Back to Tailwind CSS Academy