Transitions
Transition Property
Utilities for sets the css properties affected by transition animations.
Variant
Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled
API
| class | css |
|---|---|
| transition | transition-property: all |
| transition-none | transition-property: none |
| transition-colors | transition-property: background-color, border-color, color, fill, stroke |
| transition-opacity | transition-property: opacity |
| transition-shadow | transition-property: box-shadow |
| transition-transform | transition-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
<div class="transition duration-300 ease-in-out border-4 border-tint-granite-2 (hover)border-tint-granite-4 (hover)shadow-lg ... width-32 height-24">
...
</div>
HTML