Animations
Sliding v1.0.9
Utilities for sets the sliding animation to an element.
Class
class | css | |
---|---|---|
slide-in-up | @keyframes slide-in-up { from { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }} | |
slide-in-down | @keyframes slide-in-down { from { transform: translate3d(0, -100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }} | |
slide-in-left | @keyframes slide-in-left { from { transform: translate3d(-100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }} | |
slide-in-right | @keyframes slide-in-right { from { transform: translate3d(100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }} | |
slide-out-up | @keyframes slide-out-up { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, -100%, 0) }} | |
slide-out-down | @keyframes slide-out-down { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, 100%, 0) }} | |
slide-out-left | @keyframes slide-out-left { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(-100%, 0, 0) }} | |
slide-out-right | @keyframes slide-out-right { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(100%, 0, 0) }} |
Usage
Set basic slide animation.
<!-- Example -->
<y class="animation slide-in-up">
...
</y>
Mix with duration.
<!-- Example -->
<y class="animation slide-in-up duration-2000">
...
</y>
Mix with duration and delay.
<!-- Example -->
<y class="animation slide-in-up duration-2000 delay-2">
...
</y>
Mix with duration, delay and infinite looping.
<!-- Example -->
<y class="animation slide-in-up 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 |