Vinicunca

Fade Animations

Define animations's opacity.

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 --vin-enter-opacity: 0;
fade-in-0
fade-in-0%
fade-in-10 --vin-enter-opacity: 0.1;
fade-in-10%
fade-in-.8 --vin-enter-opacity: 0.008;
fade-in-0.8
fade-in-.8%
fade-in-52.1 --vin-enter-opacity: 0.521;
fade-in-66.66 --vin-enter-opacity: 0.6666;
fade-in-100 --vin-enter-opacity: 1;
fade-in-$my-css-var --vin-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>
ClassnameProperty
fade-out--vin-exit-opacity: 0;
fade-out-0
fade-out-0%
fade-out-10--vin-exit-opacity: 0.1;
fade-out-10%
fade-out-.8--vin-exit-opacity: 0.008;
fade-out-0.8
fade-out-.8%
fade-out-52.1--vin-exit-opacity: 0.521;
fade-out-66.66--vin-exit-opacity: 0.6666;
fade-out-100--vin-exit-opacity: 1;
fade-out-$my-css-var--vin-exit-opacity: var(--my-css-var);
Classname Property
fade-out --vin-exit-opacity: 0;
fade-out-0
fade-out-0%
fade-out-10 --vin-exit-opacity: 0.1;
fade-out-10%
fade-out-.8 --vin-exit-opacity: 0.008;
fade-out-0.8
fade-out-.8%
fade-out-52.1 --vin-exit-opacity: 0.521;
fade-out-66.66 --vin-exit-opacity: 0.6666;
fade-out-100 --vin-exit-opacity: 1;
fade-out-$my-css-var --vin-exit-opacity: var(--my-css-var);

Usage

This is a preset for creating beautiful animations with simple classnames.

Zoom Animations

Define animations's scale.