Animations
Animation Fade
Utilities for sets the fading 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 | |
|---|---|---|
| fade-in | @keyframes fade-in { from { opacity: 0 } to { opacity: 1 }} | Text |
| fade-in-bottom-left | @keyframes fade-in-bottom-left { from { opacity: 0; transform: translate3d(-100%, 100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-bottom-right | @keyframes fade-in-bottom-right { from { opacity: 0; transform: translate3d(100%, 100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-up | @keyframes fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-down | @keyframes fade-in-down { from { opacity: 0; transform: translate3d(0, -100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-left | @keyframes fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-right | @keyframes fade-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-top-left | @keyframes fade-in-top-left { from { opacity: 0; transform: translate3d(-100%, -100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-in-top-right | @keyframes fade-in-top-right { from { opacity: 0; transform: translate3d(100%, -100%, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) }} | Text |
| fade-out | @keyframes fade-in-down { from { opacity: 1 } to { opacity: 0 }} | Text |
| fade-out-bottom-left | @keyframes fade-out-bottom-left { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 1; transform: translate3d(-100%, 100%, 0) }} | Text |
| fade-out-bottom-right | @keyframes fade-out-bottom-right { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 1; transform: translate3d(100%, 100%, 0) }} | Text |
| fade-out-down | @keyframes fade-out-down { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 1; transform: translate3d(0, 100%, 0) }} | Text |
| fade-out-left | @keyframes fade-out-left { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(-100%, 0, 0) }} | Text |
| fade-out-right | @keyframes fade-out-right { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(100%, 0, 0) }} | Text |
| fade-out-top-left | @keyframes fade-out-top-left { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(-100%, -100%, 0) }} | Text |
| fade-out-top-right | @keyframes fade-out-top-right { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(100%, -100%, 0) }} | Text |
| fade-out-top-up | @keyframes fade-out-top-up { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(0, -100%, 0) }} | Text |
Usage
Set basic fade animation.
<div class="morph fade-in">
...
</div>
HTML
.dummy {
@extend
.morph,
.fade-in;
}
SCSS
Mix with duration.
<div class="morph fade-in duration-2000">
...
</div>
HTML
.dummy {
@extend
.morph,
.fade-in,
.duration-2000;
}
SCSS
Mix with duration and delay.
<div class="morph fade-in duration-2000 delay-2">
...
</div>
HTML
.dummy {
@extend
.morph,
.fade-in,
.duration-2000,
.delay-2;
}
SCSS
Mix with duration, delay and infinite looping.
<div class="morph fade-in duration-2000 loop-infinite">
...
</div>
HTML
.dummy {
@extend
.morph,
.fade-in,
.duration-2000,
.loop-infinite;
}
SCSS
Apply (hover) variant.
<div class="morph (hover)fade-in">
...
</div>
HTML
.dummy {
@extend
.morph,
.(hover)fade-in;
}
SCSS