Animations

Rolling v1.0.9

Utilities for sets the rolling animation to an element.


Class

classcss
roll-in-left@keyframes roll-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }}Text
roll-in-right@keyframes roll-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } to { opacity: 1; transform: translate3d(0, 0, 0); }}Text
roll-out-left@keyframes roll-out-left { from { opacity: 1 } to { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) }}Text
roll-out-right@keyframes roll-out-right { from { opacity: 1 } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) }}Text
Note: Utility customizing is unavailable.

Usage

Set basic roll animation.

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

Mix with duration.

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

Mix with duration and delay.

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

Mix with duration, delay and infinite looping.

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

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hoverYes
group-hover
focus
focus-within
active
visited
checked
disabled