Transitions & Animation

Transition Property

Utilities for controlling which CSS properties transition.

Quick reference

Class
Properties
transition-nonetransition-property: none;
transition-alltransition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transitiontransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-colorstransition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-opacitytransition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-shadowtransition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-transformtransition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

Basic usage

Controlling transitioned properties

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

Transition Property - 图1

Hover the button to see the expected behaviour

Transition Property - 图2

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

  1. <button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ...">
  2. Hover me
  3. </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.

  1. <div class="hover:transition-all">
  2. <!-- ... -->
  3. </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.

  1. <div class="md:transition-all">
  2. <!-- ... -->
  3. </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

  1. 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.

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

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