Transition property

Utilities for controlling which CSS properties transition


Class reference

ClassProperties
transition-nonetransition-property: none
transition-alltransition-property: all
transitiontransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter
transition-colorstransition-property: background-color, border-color, color, fill, stroke
transition-opacitytransition-property: opacity
transition-shadowtransition-property: box-shadow
transition-transformtransition-property: transform

# Usage

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

<button class="transition duration-500 ease-in-out bg-blue hover:bg-red transform hover:-translate-y-1 hover:scale-110 ...">
Hover me
</button>

# Responsive

To change which properties of an element transition at a specific breakpoint, add a {screen}: prefix to any existing transition-property utility. For example, use md:transition-colors to apply the transition-colors utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.