Transitions & Animation

Transition Property

Utilities for controlling which CSS properties transition.

Quick reference

Basic usage

Controlling transitioned properties

Use the transition-{properties} utilities to specify which properties should transition when they change.

Hover the button to see the expected behaviour

<button class="transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ...">
  Save Changes
</button>

Prefers-reduced-motion

For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...">
  Hover me
</button>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:transition-all to only apply the transition-all utility on hover.

<div class="hover:transition-all">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:transition-all to apply the transition-all utility at only medium screen sizes and above.

<div class="md:transition-all">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind provides transition-property utilities for seven common property combinations. You can customize these values by editing theme.transitionProperty or theme.extend.transitionProperty in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      }
    }
  }
}

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off transition-property value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="transition-[height]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.