Transitions

Transition Timing

Utilities for sets the easing function of transition animations.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand 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
ease-linear	transition-timing-function: linear
ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Usage

Set basic Transition with Duration and Timing, apply with pseudo class variants hover, focus, active.

Set transition timing ease-linear to an element.

Hover

ease-linear

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

HTML

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

SCSS

Set transition timing ease-in.

Hover

ease-linear

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

HTML

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

SCSS

Set transition timing ease-out.

Hover

ease-linear

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

HTML

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

SCSS

Set transition timing ease-in-out.

Hover

ease-linear

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

HTML

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

SCSS