Skip to content

Fade Animations

Use classname fade-(in|out)-<value> to define animation's opacity.

  • The -<value> part is optional.

You can use either of below as the <value>:

  • Any number between 0 and 100 including decimals. E.g. fade-in-50
  • CSS variable. E.g. fade-in-$my-css-var

Fade In

Define enter animation's starting opacity.

  • The default value is 0 if not specified.
<button class="animate-in fade-in">Button A</button>
<button class="animate-in fade-in-50">Button B</button>
<button class="animate-in fade-in-$my-css-var">Button C</button>
fade-in--una-enter-opacity: 0;
fade-in-10--una-enter-opacity: 0.1;
fade-in-.8--una-enter-opacity: 0.008;
fade-in-52.1--una-enter-opacity: 0.521;
fade-in-66.66--una-enter-opacity: 0.6666;
fade-in-100--una-enter-opacity: 1;
fade-in-$my-css-var--una-enter-opacity: var(--my-css-var);

Fade Out

Define exit animation's ending opacity.

  • The default value is 0 if not specified.
<button class="animate-out fade-out">Button A</button>
<button class="animate-out fade-out-50">Button B</button>
<button class="animate-out fade-out-$my-css-var">Button C</button>
fade-out--una-exit-opacity: 0;
fade-out-10--una-exit-opacity: 0.1;
fade-out-.8--una-exit-opacity: 0.008;
fade-out-52.1--una-exit-opacity: 0.521;
fade-out-66.66--una-exit-opacity: 0.6666;
fade-out-100--una-exit-opacity: 1;
fade-out-$my-css-var--una-exit-opacity: var(--my-css-var);

Released under the MIT License.