持续时间与缓动

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.

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.

Duration should match the perceived size of the change. Small interactions like button hover, focus rings, and link color changes look best at 100–200ms. Medium transitions like dropdown appearing, card expanding, or tooltip fading work well at 200–300ms. Large motions like sidebar sliding in, modal appearing, or page transitions can go up to 300–500ms. Never exceed 500ms for UI transitions — users should never feel like they are waiting for an animation.

The timing function (or easing function) controls how the animation progress distributes over time. A linear animation moves at constant speed. An ease-in starts slow and accelerates. An ease-out starts fast and decelerates. An ease-in-out starts and ends slow with fast middle. Different interactions feel most natural with different easings — choosing well is a subtle but important detail in polished UI design.

The choice between ease-in and ease-out has intuitive meaning: ease-in builds momentum (good for elements that are leaving the screen or collapsing) because they start slow and speed up as they exit. ease-out decelerates (good for elements entering the screen) because they arrive quickly and settle into place smoothly. This mirrors real-world physics — things that stop tend to decelerate, things that start tend to accelerate.

ease-in-out creates the most natural-feeling motion for most UI animations. It mirrors how physical objects move: starting from rest, building to peak speed, then decelerating back to rest. Use it as your default for any animation that involves elements moving between positions — sidebar slides, modal entrances, card expansions, and accordion toggles all feel most natural with ease-in-out.

The delay-* utilities add a pause before the transition begins using the CSS transition-delay property. Delays are useful for staggered animations — making a series of elements appear one after another creates a cascading effect that feels polished. Tailwind provides delays from delay-75 (75ms) to delay-1000 (1000ms). Use delays sparingly on hover interactions — delays that trigger only on hover feel unresponsive to users.

If your design system requires specific timing values not in Tailwind's defaults — like a duration-250 or a custom cubic-bezier easing — add them in tailwind.config.js. Extend transitionDuration for new duration values and transitionTimingFunction for new easing curves. Custom easing can encode your brand's motion personality, making animations feel recognizably yours.

A useful technique for hover interactions is to have different enter and exit timings. You can achieve this by applying different durations with responsive or state prefixes. Most commonly, hover-in transitions are slightly faster than hover-out transitions — the enter feels snappy and the exit fades more gently. This requires a small amount of custom CSS or JavaScript class manipulation, as Tailwind does not have an 'un-hover' variant built in.

For elements that animate frequently, you can hint to the browser to promote them to their own compositor layer using will-change. Tailwind does not have a built-in will-change utility in its core, but you can add one via arbitrary values or a custom utility. However, use will-change: transform sparingly — promoting too many elements wastes memory and can actually slow things down.

Chrome DevTools has excellent transition debugging tools. Open the Animations panel (More tools → Animations) to see all running animations and transitions. You can scrub through the timeline, replay animations at slower speeds (0.25x, 0.5x), and inspect the computed timing function curve. This makes it easy to verify that your duration and easing choices look exactly as intended without needing to hover quickly to catch fast animations.

Test your understanding of transition duration and easing in Tailwind CSS.

In this lesson you learned: duration utilities from duration-75 to duration-1000 control how long transitions take, ease-out is best for elements entering the screen and ease-in for elements leaving, and delay-* utilities add pauses before transitions begin, enabling staggered animation effects. Next up we explore Tailwind's built-in keyframe animations for loading and attention patterns.