0Pricing
Tailwind CSS Academy · Lesson

Transition Utilities

Enable CSS transitions with transition-*, choose which properties animate with transition-colors, transition-transform, and transition-all.

Transition Utilities is a free Tailwind CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why CSS Transitions Matter

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 transition Utility

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.

<!-- Simple hover transition on a button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
  Hover Me
</button>

<!-- The transition class enables smooth color changes -->
<!-- Without it, the color snaps instantly on hover -->
<!-- With it, the background color animates over 150ms (Tailwind default) -->

Specific Transition Properties

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.

<!-- Only animate colors -->
<button class="bg-blue-600 hover:bg-blue-700 text-white transition-colors">
  Color Transition
</button>

<!-- Only animate transform (GPU accelerated) -->
<div class="hover:scale-105 transition-transform cursor-pointer">
  Scale on hover
</div>

<!-- Only animate opacity -->
<div class="opacity-100 hover:opacity-75 transition-opacity">
  Fade on hover
</div>

<!-- Animate shadow (depth change) -->
<div class="shadow hover:shadow-lg transition-shadow rounded-xl p-4">
  Shadow depth change
</div>

transition-all vs Specific Properties

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-all: animates EVERYTHING that changes -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-all">
  All properties animate (colors, transforms, borders...)
</div>

<!-- More precise: only animate what you intend -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-colors transition-transform">
  Only colors and transforms animate
</div>

Combining Transition with State Variants

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.

<!-- Transition enables smooth enter AND exit -->
<a class="text-gray-600 hover:text-blue-600 transition-colors duration-200"
   href="#">
  Animated link — hover to see color change both ways
</a>

<!-- Card with multiple transitions -->
<div class="bg-white hover:bg-blue-50
            shadow-sm hover:shadow-md
            border border-gray-200 hover:border-blue-200
            transition-all duration-200 rounded-xl p-6 cursor-pointer">
  Interactive card
</div>

Animating Opacity and Visibility

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.

<!-- Fade an element using opacity + pointer-events -->
<div id="tooltip"
     class="opacity-0 pointer-events-none
            group-hover:opacity-100 group-hover:pointer-events-auto
            transition-opacity duration-200
            bg-gray-900 text-white text-xs px-2 py-1 rounded">
  Tooltip content
</div>

<!-- JavaScript fade with class toggle -->
<!-- Remove: classList.add('opacity-0', 'pointer-events-none') -->
<!-- Show: classList.remove('opacity-0', 'pointer-events-none') -->

Transform Transitions

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.

<!-- Subtle scale effect on card hover -->
<div class="hover:scale-105 transition-transform duration-200 cursor-pointer bg-white rounded-xl p-6 shadow">
  Card that scales up on hover
</div>

<!-- Rotating icon -->
<button class="group p-2">
  <svg class="w-5 h-5 group-hover:rotate-180 transition-transform duration-300">
    <!-- chevron icon -->
  </svg>
</button>

<!-- Slide from left with translateX -->
<div class="-translate-x-full open:translate-x-0 transition-transform duration-300">
  Sidebar panel
</div>

Reduced Motion Accessibility

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.

<!-- Only animate when user is OK with motion -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg
               motion-safe:transition-colors motion-safe:duration-200">
  Accessible Button
</button>

<!-- Remove transitions entirely for reduced-motion users -->
<div class="hover:scale-105 motion-reduce:transform-none
            motion-safe:transition-transform motion-safe:duration-200">
  Accessible card hover
</div>

Transition on Focus States

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.

<input
  type="text"
  class="
    w-full px-4 py-2 rounded-lg
    border border-gray-300
    text-gray-900 placeholder:text-gray-400
    ring-0
    focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
    transition duration-150
  "
  placeholder="Smooth focus ring transition"
/>

Multiple Transition Properties

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.

<!-- Animate colors AND shadows, but not transforms -->
<div class="
  bg-white hover:bg-gray-50
  shadow hover:shadow-md
  scale-100 hover:scale-105
  transition-colors transition-shadow
  duration-200 rounded-xl p-6
">
  Colors and shadows animate smoothly;
  scale change happens instantly (no transition-transform)
</div>

Transition in Practice: Complete Example

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.

<a
  href="/features"
  class="
    relative inline-block
    text-gray-600 hover:text-blue-600
    font-medium text-sm
    pb-0.5
    transition-colors duration-150
    focus:outline-none focus:text-blue-600
    group
  "
>
  Features
  <!-- Animated underline -->
  <span class="
    absolute bottom-0 left-0 w-full h-0.5 bg-blue-600
    scale-x-0 group-hover:scale-x-100
    transition-transform duration-200 origin-left
  "></span>
</a>

Quick Check

Test your understanding of Tailwind's transition utilities.

Lesson Recap

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.

Frequently asked questions

Is the “Transition Utilities” lesson free?

Yes — the full text of “Transition Utilities” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Transition Utilities”?

Enable CSS transitions with transition-*, choose which properties animate with transition-colors, transition-transform, and transition-all. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Tailwind CSS Academy?

No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Transition Utilities” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Tailwind CSS Academy lesson?

Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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