Slide Animations

Use classname slide-(in|out)-<direction>-<value> to define animation's translate.

• The -<value> part is optional.
• You can optionally use slide-in-from / slide-out-to instead of slide-in / slide-out to make it more readable

You can use either of below as the <direction> (alias / full):

• t / top
• b / bottom
• l / left
• r / right

TIP

top / bottom and left / right can be used together.

y-axis Direction	x-axis Direction	Result
t / top	l / left	↖️
t / top	r / right	↗️
b / bottom	l / left	↙️
b / bottom	r / right	↘️

E.g. the following combination will make the element slide in from top-left corner. Playground

<button class="animate-in slide-in-t-1/2 slide-in-l-4">Button A</button>

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

• Any number including negative(⚠️) and decimals. E.g. slide-in-t-50
• Any percentage including negative(⚠️) and decimals. E.g. slide-in-t-66.6%
• Any fraction including negative(⚠️). E.g. slide-in-t-1/2
• full as 100%. E.g. slide-in-t-full
• CSS variable. E.g. slide-in-t-$my-css-var

WARNING

Using NEGATIVE value is discouraged. Although it will work as expected, but can be misleading or hard to understand.

You can always switch to the opposite direction to avoid using negative values.

E.g.

<button class="animate-in slide-in-top--4">Button A</button>
<button class="animate-in slide-in-bottom--8">Button B</button>

is equivalent to

<button class="animate-in slide-in-bottom-4">Button A</button>
<button class="animate-in slide-in-top-8">Button B</button>

Note: CSS variable usages will be placed as is WITHOUT any direction or positive / negative check.

Slide In

Define enter animation's starting translate.

• The default value is 100% if not specified.

<button class="animate-in slide-in-t">Button A</button>
<button class="animate-in slide-in-top">Button B</button>
<button class="animate-in slide-in-from-t">Button C</button>
<button class="animate-in slide-in-from-top">Button D</button>
<button class="animate-in slide-in-t-4">Button E</button>
<button class="animate-in slide-in-t-50%">Button F</button>
<button class="animate-in slide-in-t-2/3">Button G</button>
<button class="animate-in slide-in-t-full">Button H</button>
<button class="animate-in slide-in-t-$my-css-var">Button I</button>

Classname	Property
slide-in-t	--una-enter-translate-y: -100%;
slide-in-top
slide-in-from-t
slide-in-from-top
slide-in-t-full
slide-in-b	--una-enter-translate-y: 100%;
slide-in-l	--una-enter-translate-x: -100%;
slide-in-r	--una-enter-translate-x: 100%;
slide-in-b-10	--una-enter-translate-y: 2.5rem;
slide-in-b-48%	--una-enter-translate-y: 48%;
slide-in-b-.8	--una-enter-translate-y: 0.2rem;
slide-in-b-52.1	--una-enter-translate-y: 13.025rem;
slide-in-b-66.6%	--una-enter-translate-y: 66.6%;
slide-in-b-100	--una-enter-translate-y: 25rem;
slide-in-b--20 ⚠️	--una-enter-translate-y: -5rem;
slide-in-b--48% ⚠️	--una-enter-translate-y: -48%;
slide-in-b--66.66 ⚠️	--una-enter-translate-y: -16.665rem;
slide-in-t--20 ⚠️	--una-enter-translate-y: 5rem;
slide-in-t--48% ⚠️	--una-enter-translate-y: 48%;
slide-in-t--66.66 ⚠️	--una-enter-translate-y: 16.665rem;
slide-in-b-1/3	--una-enter-translate-y: 33.3333333333%;
slide-in-b--2/3 ⚠️	--una-enter-translate-y: -66.6666666667%;
slide-in-t--2/3 ⚠️	--una-enter-translate-y: 66.6666666667%;
slide-in-b-full	--una-enter-translate-y: 100%;
slide-in-t-$my-css-var	--una-enter-translate-y: var(--my-css-var);
slide-in-b-$my-css-var
slide-in-l-$my-css-var	--una-enter-translate-x: var(--my-css-var);
slide-in-r-$my-css-var

Slide Out

Define exit animation's starting translate.

• The default value is 100% if not specified.

<button class="animate-out slide-out-t">Button A</button>
<button class="animate-out slide-out-top">Button B</button>
<button class="animate-out slide-out-from-t">Button C</button>
<button class="animate-out slide-out-from-top">Button D</button>
<button class="animate-out slide-out-t-4">Button E</button>
<button class="animate-out slide-out-t-50%">Button F</button>
<button class="animate-out slide-out-t-2/3">Button G</button>
<button class="animate-out slide-out-t-full">Button H</button>
<button class="animate-out slide-out-t-$my-css-var">Button I</button>

Classname	Property
slide-out-t	--una-exit-translate-y: -100%;
slide-out-top
slide-out-to-t
slide-out-to-top
slide-out-t-full
slide-out-b	--una-exit-translate-y: 100%;
slide-out-l	--una-exit-translate-x: -100%;
slide-out-r	--una-exit-translate-x: 100%;
slide-out-b-10	--una-exit-translate-y: 2.5rem;
slide-out-b-48%	--una-exit-translate-y: 48%;
slide-out-b-.8	--una-exit-translate-y: 0.2rem;
slide-out-b-52.1	--una-exit-translate-y: 13.025rem;
slide-out-b-66.6%	--una-exit-translate-y: 66.6%;
slide-out-b-100	--una-exit-translate-y: 25rem;
slide-out-b--20 ⚠️	--una-exit-translate-y: -5rem;
slide-out-b--48% ⚠️	--una-exit-translate-y: -48%;
slide-out-b--66.66 ⚠️	--una-exit-translate-y: -16.665rem;
slide-out-t--20 ⚠️	--una-exit-translate-y: 5rem;
slide-out-t--48% ⚠️	--una-exit-translate-y: 48%;
slide-out-t--66.66 ⚠️	--una-exit-translate-y: 16.665rem;
slide-out-b-1/3	--una-exit-translate-y: 33.3333333333%;
slide-out-b--2/3 ⚠️	--una-exit-translate-y: -66.6666666667%;
slide-out-t--2/3 ⚠️	--una-exit-translate-y: 66.6666666667%;
slide-out-b-full	--una-exit-translate-y: 100%;
slide-out-t-$my-css-var	--una-exit-translate-y: var(--my-css-var);
slide-out-b-$my-css-var
slide-out-l-$my-css-var	--una-exit-translate-x: var(--my-css-var);
slide-out-r-$my-css-var