Fade-in & Fade-out animation

Create a "fade" CSS animation effect right in the HTML code

Overview

The fade alias fadees the element to its shifted position from original one. It can be used in the horizontal (fade-{left|right}), or in the vertical (fade-{up|down}) direction, triggered by various events. This is useful for scenarios like promoting buttons on hover or creating reveal animations on inview.

Hover (fade-in)

Hover (fade-out)

Syntax

Default

The default fade-in and fade-out parameters:

Name Start value (default) End value
fade-in 1 0
Name Start value (default) End value
fade-out 1 0

Custom values

You can change the initial (starting) value and customize its options.

Examples

These examples show the fade-* alias in action using the hover trigger, but you can use any of the supported triggers.

Default

By default, the fade-* alias uses the opacity values of 0 and 1.

fade-in

The fade-in alias animates the opacity from 0 to 1.

Hover
fade-out

The fade-in alias animate the opacity from 1 to 0.

Hover

Custom values

Customize the initial value (starting position) of the element by passing the custom value into the alias parenthesis (). In these cases, the custom value is 0.2.

Fade in

The hover:fade-in(0.2) fades an element to 0.2 from the default value of 0 on hover.

Hover

Fade out

Similar to above, but now the hover:fade-out(2rem) fades the element from the default value of 1 to the custom 0.2.

Hover

Options

All property options passed in the <> are supported.

Hover