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 ofslide-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.
html
<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 decimals. E.g.
slide-in-t-50
- Any fraction including negative. E.g.
slide-in-t-1/2
full
as100%
. E.g.slide-in-t-full
- CSS variable. E.g.
slide-in-t-$my-css-var
WARNING
Using negative number or fraction 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.
html
<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
html
<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.
html
<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-2/3">Button F</button>
<button class="animate-in slide-in-t-full">Button G</button>
<button class="animate-in slide-in-t-$my-css-var">Button H</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-.8 | --una-enter-translate-y: 0.2rem; |
slide-in-b-52.1 | --una-enter-translate-y: 13.025rem; |
slide-in-b-100 | --una-enter-translate-y: 25rem; |
slide-in-b--20 | --una-enter-translate-y: -5rem; |
slide-in-b--66.66 | --una-enter-translate-y: -16.665rem; |
slide-in-t--20 | --una-enter-translate-y: 5rem; |
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.
html
<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-2/3">Button F</button>
<button class="animate-out slide-out-t-full">Button G</button>
<button class="animate-out slide-out-t-$my-css-var">Button H</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-.8 | --una-exit-translate-y: 0.2rem; |
slide-out-b-52.1 | --una-exit-translate-y: 13.025rem; |
slide-out-b-100 | --una-exit-translate-y: 25rem; |
slide-out-b--20 | --una-exit-translate-y: -5rem; |
slide-out-b--66.66 | --una-exit-translate-y: -16.665rem; |
slide-out-t--20 | --una-exit-translate-y: 5rem; |
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 |