Transitions
Transition Property
Utilities for sets the css properties affected by transition animations.
Class
| class | css |
|---|---|
| transition-none | transition-property: none |
| transition-all | transition-property: all |
| transition | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform |
| 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.
<!-- 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
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | ||
| hover | ||
| group-hover | ||
| focus | ||
| focus-visible | Yes | |
| focus-within | Yes | |
| active | ||
| visited | ||
| checked | ||
| disabled |
