Press/to search

Animations

Animation Loop v1.1.1

Utilities for sets the animation control with limited loop or infinite.


Class

classcss
loop-2animation-iteration-count: 2
loop-3animation-iteration-count: 3
loop-4animation-iteration-count: 4
loop-5animation-iteration-count: 5
loop-infiniteanimation-iteration-count: infinite

Usage

<!-- Example -->
<y class="animation blur-in loop-infinite">
...
</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.loop',
$property: animation-iteration-count,
$modifier: (
loop-1: 1,
loop-2: 2
//...
)
);

Variant

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

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