Animations

Animation Duration

Utilities for sets the animation control with durations.

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-300	animation-duration: 300ms
duration-500	animation-duration: 500ms
duration-800	animation-duration: 800ms
duration-2000	animation-duration: 2000ms
duration-3000	animation-duration: 3000ms
duration-4000	animation-duration: 4000ms

Usage

<div class="morph blur-in duration-2000">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .blur-in,
    .duration-2000;
}

SCSS