Transitions

Transition Duration

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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.

Hover duration-75

<div class="transition duration-75 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-75,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 100ms.

Hover duration-100

<div class="transition duration-100 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-100,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 150ms.

Hover duration-150

<div class="transition duration-150 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-150,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 200ms.

Hover duration-200

<div class="transition duration-200 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-200,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 300ms.

Hover duration-300

<div class="transition duration-300 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-300,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 500ms.

Hover duration-500

<div class="transition duration-500 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-500,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS

Set transition duration 1000ms.

Hover duration-1000

<div class="transition duration-1000 ease-in-out ... (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-1000,
    .ease-in-out,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS