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.

<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>

Classname	Property
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.

<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>

Classname	Property
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);