Press/to search

Transitions

Transition Duration

Utilities for sets the length of time for a transition animations to complete.


Class

classcss
duration-75transition-duration: 75ms
duration-100transition-duration: 100ms
duration-150transition-duration: 150ms
duration-200transition-duration: 200ms
duration-300transition-duration: 300ms
duration-500transition-duration: 500ms
duration-700transition-duration: 700ms
duration-1000transition-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.

Hover duration-75
<!-- Example -->
<y class="transition duration-75 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 100ms.

Hover duration-100
<!-- Example -->
<y class="transition duration-100 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 150ms.

Hover duration-150
<!-- Example -->
<y class="transition duration-150 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 200ms.

Hover duration-200
<!-- Example -->
<y class="transition duration-200 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 300ms.

Hover duration-300
<!-- Example -->
<y class="transition duration-300 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 500ms.

Hover duration-500
<!-- Example -->
<y class="transition duration-500 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Set transition duration 1000ms.

Hover duration-1000
<!-- Example -->
<y class="transition duration-1000 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'duration',
$property: transition-duration,
$modifier: (
100: 100ms,
200: 200ms
//...
)
);

Variant

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

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