Animations

Animation Duration

Utilities for sets the animation control with durations.

Variant

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

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="animation blur-in duration-2000">
  ...
</div>

HTML

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

SCSS