Transitions
Transition Duration
Utilities for sets the length of time for a transition animations to complete.
Class
class | css |
---|---|
duration-75 | transition-duration: 75ms |
duration-100 | transition-duration: 100ms |
duration-150 | transition-duration: 150ms |
duration-200 | transition-duration: 200ms |
duration-300 | transition-duration: 300ms |
duration-500 | transition-duration: 500ms |
duration-700 | transition-duration: 700ms |
duration-1000 | transition-duration: 1000ms |
Usage
Set basic Transition with Duration and Timing, apply with pseudo class variants hover
, focus
, active
.
Set transition duration 75ms
to an element.
<!-- Example -->
<y class="transition duration-75 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 100ms
.
<!-- Example -->
<y class="transition duration-100 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 150ms
.
<!-- Example -->
<y class="transition duration-150 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 200ms
.
<!-- Example -->
<y class="transition duration-200 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 300ms
.
<!-- Example -->
<y class="transition duration-300 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 500ms
.
<!-- Example -->
<y class="transition duration-500 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Set transition duration 1000ms
.
<!-- Example -->
<y class="transition duration-1000 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'duration',
//variant: 'responsive',
property: 'transition-duration',
modifier: (
'600': '...ms',
'800': '...ms'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | Yes | |
active | ||
visited | ||
checked | ||
disabled |