Skip to content

Zoom Animations

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.
html
<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>
ClassnameProperty
zoom-in--una-enter-scale: 0;
zoom-in-0
zoom-in-0%
zoom-in-10--una-enter-scale: 0.1;
zoom-in-10%
zoom-in-.8--una-enter-scale: 0.008;
zoom-in-0.8
zoom-in-.8%
zoom-in-52.1--una-enter-scale: 0.521;
zoom-in-100--una-enter-scale: 1;
zoom-in--20--una-enter-scale: -0.2;
zoom-in--20%
zoom-in--66.66--una-enter-scale: -0.6666;
zoom-in-1/3--una-enter-scale: 33.3333333333%;
zoom-in--2/3--una-enter-scale: -66.6666666667%;
zoom-in-full--una-enter-scale: 100%;
zoom-in-$my-css-var--una-enter-scale: var(--my-css-var);

Zoom Out

Define exit animation's ending scale.

  • The default value is 0 if not specified.
html
<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>
ClassnameProperty
zoom-out--una-exit-scale: 0;
zoom-out-0
zoom-out-0%
zoom-out-10--una-exit-scale: 0.1;
zoom-out-10%
zoom-out-.8--una-exit-scale: 0.008;
zoom-out-0.8
zoom-out-.8%
zoom-out-52.1--una-exit-scale: 0.521;
zoom-out-100--una-exit-scale: 1;
zoom-out--20--una-exit-scale: -0.2;
zoom-out--20%
zoom-out--66.66--una-exit-scale: -0.6666;
zoom-out-1/3--una-exit-scale: 33.3333333333%;
zoom-out--2/3--una-exit-scale: -66.6666666667%;
zoom-out-full--una-exit-scale: 100%;
zoom-out-$my-css-var--una-exit-scale: var(--my-css-var);

Released under the MIT License.