Animations
Rolling v1.0.9
Utilities for sets the rolling animation to an element.
Class
| class | css | |
|---|---|---|
| roll-in-left | @keyframes roll-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | |
| 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); }} | |
| roll-out-left | @keyframes roll-out-left { from { opacity: 1 } to { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) }} | |
| roll-out-right | @keyframes roll-out-right { from { opacity: 1 } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) }} |
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
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.