Press/to search

Animations

Blur v1.0.9

Utilities for sets the blur animation to an element.


Class

classcss
blur-in@keyframes blur-in { from { opacity: 0; filter: blur(4px) } to { opacity: 1; filter: blur(0) }}Text
blur-out@keyframes blur-out { from { opacity: 1; filter: blur(0) } to { opacity: 1; filter: blur(4px) }}Text

Usage

Set basic blur animation.

<!-- Example -->
<y class="animation blur-in">
...
</y>

Mix with duration.

<!-- Example -->
<y class="animation blur-in duration-2000">
...
</y>

Mix with duration and delay.

<!-- Example -->
<y class="animation blur-in duration-2000 delay-2">
...
</y>

Mix with duration, delay and infinite looping.

<!-- Example -->
<y class="animation blur-in duration-2000 delay-2 infinite">
...
</y>

Variant

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

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