Animations

Animation Roll

Utilities for sets the rolling 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

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

Usage

Set basic roll animation.

<div class="morph roll-in-left">
...
</div>
HTML
.dummy {
@extend
.morph,
.roll-in-left;
}
SCSS

Mix with duration.

<div class="morph roll-in-left duration-2000">
...
</div>
HTML
.dummy {
@extend
.morph,
.roll-in-left,
.duration-2000;
}
SCSS

Mix with duration and delay.

<div class="morph roll-in-left duration-2000 delay-2">
...
</div>
HTML
.dummy {
@extend
.morph,
.roll-in-left,
.duration-2000,
.delay-2;
}
SCSS

Mix with duration, delay and infinite looping.

<div class="morph roll-in-left duration-2000 delay-2 loop-infinite">
...
</div>
HTML
.dummy {
@extend
.morph,
.roll-in-left,
.duration-2000,
.loop-infinite;
}
SCSS

Apply (hover) variant,

<div class="morph (hover)roll-in-left">
...
</div>
HTML
.dummy {
@extend
.morph,
.(hover)roll-in-left;
}
SCSS