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.

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

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