Animations
Blur v1.0.9
Utilities for sets the blur animation to an element.
Class
class | css | |
---|---|---|
blur-in | @keyframes blur-in { from { opacity: 0; filter: blur(4px) } to { opacity: 1; filter: blur(0) }} | |
blur-out | @keyframes blur-out { from { opacity: 1; filter: blur(0) } to { opacity: 1; filter: blur(4px) }} |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | Yes | |
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |