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.