Press/to search

Animations

Animation Duration v1.0.9

Utilities for sets the animation control with durations.


Class

classcss
duration-300animation-duration: 300ms
duration-500animation-duration: 500ms
duration-800animation-duration: 800ms
duration-2000animation-duration: 2000ms
duration-3000animation-duration: 3000ms
duration-4000animation-duration: 4000ms

Usage

<!-- Example -->
<y class="animation blur-in duration-2000">
...
</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: 'animation.duration',
$property: animation-duration,
$modifier: (
5000: 5000ms,
6000: 6000ms
//...
)
);

Variant

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

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