Fade

Basic animations for fading elements in and out.

Fade In

Fades an element into view.

To use this animation add simple-animation sa-fade-in class to the element.

This animation can be combined with any utility class to delay, repeat or change the speed of the animation.

Fade In

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-fade-in">Fade In</div>

Fade Out

Fades an element out of view.

To use this animation add simple-animation sa-fade-out class to the element.

This animation can be combined with any utility class to delay, repeat or change the speed of the animation.

Fade Out

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-fade-out">Fade Out</div>