전환 유틸리티

CSS transitions make state changes smooth and feel intentional rather than abrupt. When a button changes background color on hover, a sidebar slides in, or an input gets a focus ring, transitions communicate to users that something happened and guide their attention. Tailwind's transition utilities let you add these animations with a single class — no custom CSS required for the most common use cases.

The base transition utility enables CSS transitions for the most commonly animated properties: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, and filter. Adding just transition to a button is usually enough to make hover color changes animate smoothly.

Use targeted transition utilities to animate only specific properties. This is more performant than transition-all because the browser does not need to recalculate all possible animated properties on every frame. Tailwind provides transition-colors, transition-opacity, transition-shadow, transition-transform, and transition-all for different needs.

transition-all transitions every animatable CSS property simultaneously. While convenient, it can cause unexpected behavior — for example, layout properties like height or width becoming animated when you only wanted color changes. It is also less performant because the browser tracks all properties. Use specific transition utilities whenever possible; reach for transition-all only when you genuinely need multiple unrelated properties to animate together.

Transition utilities work by enabling the CSS transition property. State variants like hover:, focus:, and group-hover: provide the before and after states that the transition animates between. Always place the transition class on the base element (not inside the variant) so it applies in both directions — the transition runs on enter AND exit of the state.

Fading elements in and out requires transitioning opacity combined with managing visibility or display. CSS transitions cannot animate to or from display: none, so use opacity plus pointer-events-none for simple fade effects. For elements that must truly disappear (removing them from the tab order), combine opacity transitions with JavaScript class toggling.

Transform transitions are particularly smooth because they run on the GPU rather than triggering layout recalculations. Tailwind's scale-*, rotate-*, translate-*, and skew-* utilities all animate cleanly with transition-transform. Scale effects on cards and buttons, rotation effects on icons, and slide-in effects on panels all use this approach for best performance.

Some users experience motion sickness or seizures from animations and set their OS to Reduce Motion. Tailwind provides the motion-reduce: and motion-safe: variants that activate based on the user's prefers-reduced-motion media query. Use motion-safe: to apply animations only when the user has not requested reduced motion, making your transitions accessible by default.

Focus transitions are particularly important for keyboard navigation. When a user tabs to an input or button, the focus ring should appear smoothly rather than snapping. Apply transition to all interactive elements so the focus ring transition feels as polished as the hover transition. Include focus:ring-* and focus:ring-offset-* with a transition for the best keyboard experience.

You can combine multiple specific transition utilities on a single element to animate only a precise set of properties. Tailwind composes these using the CSS transition-property shorthand. Stacking transition-colors and transition-shadow on the same element makes both colors and shadows animate while leaving other properties (like transforms) instant.

Here is a real-world navigation link with all transitions polished: the background fades in on hover, the text color changes simultaneously, the underline grows from left to right using a scale transform, and focus states match the hover style exactly. Every interaction feels intentional and smooth without a single line of custom CSS.

In this lesson you learned: the base transition utility enables smooth animation for common properties, specific transition utilities like transition-colors and transition-transform are more performant than transition-all, and the motion-safe: variant ensures animations only apply when the user has not requested reduced motion. Next up we control transition duration and timing functions.