Press/to search

Animations

Sliding v1.0.9

Utilities for sets the sliding animation to an element.


Class

classcss
slide-in-up@keyframes slide-in-up { from { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }}Text
slide-in-down@keyframes slide-in-down { from { transform: translate3d(0, -100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }}Text
slide-in-left@keyframes slide-in-left { from { transform: translate3d(-100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }}Text
slide-in-right@keyframes slide-in-right { from { transform: translate3d(100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) }}Text
slide-out-up@keyframes slide-out-up { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, -100%, 0) }}Text
slide-out-down@keyframes slide-out-down { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, 100%, 0) }}Text
slide-out-left@keyframes slide-out-left { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(-100%, 0, 0) }}Text
slide-out-right@keyframes slide-out-right { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(100%, 0, 0) }}Text

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

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

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