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
.
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.
fade-out
The fade-in
alias animate the opacity from 1 to 0.
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
.
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.
Options
All property options passed in the <>
are supported.