Animations

Fade v1.0.9

Utilities for sets the fading animation to an element.

Class

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

Note: Utility customizing is unavailable.

Usage

Set basic fade animation.

<!-- Example -->
<y class="animation fade-in">
  ...
</y>

Mix with duration.

<!-- Example -->
<y class="animation fade-in duration-2000">
  ...
</y>

Mix with duration and delay.

<!-- Example -->
<y class="animation fade-in duration-2000 delay-2">
  ...
</y>

Mix with duration, delay and infinite looping.

<!-- Example -->
<y class="animation fade-in 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