Press/to search

Transitions

Transition Property

Utilities for sets the css properties affected by transition animations.


Class

classcss
transitiontransition-property: all
transition-nonetransition-property: none
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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.