Transitions

Transition Property

Utilities for sets the css properties affected by transition animations.


Class

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

Usage

Set basic transition with Duration and Timing, apply with pseudo class variants hover, focus, active.

An example of transitioning an element with Border Width and Box Shadow utilities.

Hover
<!-- Example -->
<y class="transition duration-300 ease-in-out border-4 border-gray-400 (hover)border-gray-500 (hover)shadow-lg ... w-32 h-24">
...
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visibleYes
focus-withinYes
active
visited
checked
disabled