Animations

Animation Slide

Utilities for sets the sliding animation to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
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.

<div class="morph slide-in-up">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .slide-in-up;
}

SCSS

Mix with duration.

<div class="morph slide-in-up duration-2000">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .slide-in-up,
    .duration-2000;
}

SCSS

Mix with duration and delay.

<div class="morph slide-in-up duration-2000 delay-2">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .slide-in-up,
    .duration-2000,
    .delay-2;
}

SCSS

Mix with duration, delay and infinite looping.

<div class="morph slide-in-up duration-2000 delay-2 loop-infinite">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .slide-in-up,
    .duration-2000,
    .loop-infinite;
}

SCSS

Apply (hover) variant,

<div class="morph (hover)slide-in-up">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .(hover)slide-in-up;
}

SCSS