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
  • Any percentage between 0% and 100% including decimals, E.g. fade-in-66.6%
  • 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.
html
<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-66.6%">Button C</button>
<button class="animate-in fade-in-$my-css-var">Button D</button>
ClassnameProperty
fade-in--una-enter-opacity: 0;
fade-in-0
fade-in-0%
fade-in-10--una-enter-opacity: 0.1;
fade-in-10%
fade-in-.8--una-enter-opacity: 0.008;
fade-in-0.8
fade-in-.8%
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.
html
<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-66.6%">Button C</button>
<button class="animate-out fade-out-$my-css-var">Button D</button>
ClassnameProperty
fade-out--una-exit-opacity: 0;
fade-out-0
fade-out-0%
fade-out-10--una-exit-opacity: 0.1;
fade-out-10%
fade-out-.8--una-exit-opacity: 0.008;
fade-out-0.8
fade-out-.8%
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.