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-within | Yes | |
active | ||
visited | ||
checked | ||
disabled |