Vinicunca

Zoom Animations

Define animations's scale.

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

  • The -<value> part is optional.

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

  • Any number including negative and decimals. e.g. zoom-in-50
  • Any percentage including negative and decimals. e.g. zoom-in-66.6%
  • Any fraction including negative. e.g. zoom-in-1/2
  • full as 100%. e.g. zoom-in-full
  • CSS variable. e.g. zoom-in-$my-css-var

Zoom In

Define enter animation's starting scale.

  • The default value is 0 if not specified.
<button class="animate-in zoom-in">Button A</button>
<button class="animate-in zoom-in-50">Button B</button>
<button class="animate-in zoom-in-66.6%">Button C</button>
<button class="animate-in zoom-in-2/3">Button D</button>
<button class="animate-in zoom-in-full">Button E</button>
<button class="animate-in zoom-in-$my-css-var">Button F</button>
Classname Property
zoom-in --vin-enter-scale: 0;
zoom-in-0
zoom-in-0%
zoom-in-10 --vin-enter-scale: 0.1;
zoom-in-10%
zoom-in-.8 --vin-enter-scale: 0.008;
zoom-in-0.8
zoom-in-.8%
zoom-in-52.1 --vin-enter-scale: 0.521;
zoom-in-100 --vin-enter-scale: 1;
zoom-in--20 --vin-enter-scale: -0.2;
zoom-in--20%
zoom-in--66.66 --vin-enter-scale: -0.6666;
zoom-in-1/3 --vin-enter-scale: 33.3333333333%;
zoom-in--2/3 --vin-enter-scale: -66.6666666667%;
zoom-in-full --vin-enter-scale: 100%;
zoom-in-$my-css-var --vin-enter-scale: var(--my-css-var);

Zoom Out

Define exit animation's ending scale.

  • The default value is 0 if not specified.
<button class="animate-out zoom-out">Button A</button>
<button class="animate-out zoom-out-50">Button B</button>
<button class="animate-out zoom-out-66.6%">Button C</button>
<button class="animate-out zoom-out-2/3">Button D</button>
<button class="animate-out zoom-out-full">Button E</button>
<button class="animate-out zoom-out-$my-css-var">Button F</button>
Classname Property
zoom-out --vin-exit-scale: 0;
zoom-out-0
zoom-out-0%
zoom-out-10 --vin-exit-scale: 0.1;
zoom-out-10%
zoom-out-.8 --vin-exit-scale: 0.008;
zoom-out-0.8
zoom-out-.8%
zoom-out-52.1 --vin-exit-scale: 0.521;
zoom-out-100 --vin-exit-scale: 1;
zoom-out--20 --vin-exit-scale: -0.2;
zoom-out--20%
zoom-out--66.66 --vin-exit-scale: -0.6666;
zoom-out-1/3 --vin-exit-scale: 33.3333333333%;
zoom-out--2/3 --vin-exit-scale: -66.6666666667%;
zoom-out-full --vin-exit-scale: 100%;
zoom-out-$my-css-var --vin-exit-scale: var(--my-css-var);

Fade Animations

Define animations's opacity.

Spin Animations

Define animations's rotate.