Vinicunca

Slide Animations

Define animations's translate.

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

  • top
  • bottom
  • left
  • right
top / bottom and left / right can be used together.
y-axis Directionx-axis DirectionResult
topleft↖️
topright↗️
bottomleft↙️
bottomright↘️
For example the following combination will make the element slide in from top-left corner. Playground
<button class="animate-in slide-in-top-1/2 slide-in-left-4">Button A</button>

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

  • Any number including negative(⚠️) and decimals. e.g. slide-in-top-50
  • Any percentage including negative(⚠️) and decimals. e.g. slide-in-top-66.6%
  • Any fraction including negative(⚠️). e.g. slide-in-top-1/2
  • full as 100%. e.g. slide-in-top-full
  • CSS variable. e.g. slide-in-top-$my-css-var
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:
<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-top">Button B</button>
<button class="animate-in slide-in-from-top">Button D</button>
<button class="animate-in slide-in-top-4">Button E</button>
<button class="animate-in slide-in-top-50%">Button F</button>
<button class="animate-in slide-in-top-2/3">Button G</button>
<button class="animate-in slide-in-top-full">Button H</button>
<button class="animate-in slide-in-top-$my-css-var">Button I</button>
Classname Property
slide-in-top --vin-enter-translate-y: -100%;
slide-in-from-top
slide-in-top-full
slide-in-bottom --vin-enter-translate-y: 100%;
slide-in-left --vin-enter-translate-x: -100%;
slide-in-right --vin-enter-translate-x: 100%;
slide-in-bottom-10 --vin-enter-translate-y: 2.5rem;
slide-in-bottom-48% --vin-enter-translate-y: 48%;
slide-in-bottom-.8 --vin-enter-translate-y: 0.2rem;
slide-in-bottom-52.1 --vin-enter-translate-y: 13.025rem;
slide-in-bottom-66.6% --vin-enter-translate-y: 66.6%;
slide-in-bottom-100 --vin-enter-translate-y: 25rem;
slide-in-bottom--20 ⚠️ --vin-enter-translate-y: -5rem;
slide-in-bottom--48% ⚠️ --vin-enter-translate-y: -48%;
slide-in-bottom--66.66 ⚠️ --vin-enter-translate-y: -16.665rem;
slide-in-top--20 ⚠️ --vin-enter-translate-y: 5rem;
slide-in-top--48% ⚠️ --vin-enter-translate-y: 48%;
slide-in-top--66.66 ⚠️ --vin-enter-translate-y: 16.665rem;
slide-in-bottom-1/3 --vin-enter-translate-y: 33.3333333333%;
slide-in-bottom--2/3 ⚠️ --vin-enter-translate-y: -66.6666666667%;
slide-in-top--2/3 ⚠️ --vin-enter-translate-y: 66.6666666667%;
slide-in-bottom-full --vin-enter-translate-y: 100%;
slide-in-top-$my-css-var --vin-enter-translate-y: var(--my-css-var);
slide-in-bottom-$my-css-var
slide-in-left-$my-css-var --vin-enter-translate-x: var(--my-css-var);
slide-in-right-$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-top">Button</button>
<button class="animate-out slide-out-from-top">Button</button>
<button class="animate-out slide-out-top-4">Button</button>
<button class="animate-out slide-out-top-50%">Button</button>
<button class="animate-out slide-out-top-2/3">Button</button>
<button class="animate-out slide-out-top-full">Button</button>
<button class="animate-out slide-out-top-$my-css-var">Button</button>
Classname Property
slide-out-top --vin-exit-translate-y: -100%;
slide-out-to-top
slide-out-top-full
slide-out-bottom --vin-exit-translate-y: 100%;
slide-out-left --vin-exit-translate-x: -100%;
slide-out-right --vin-exit-translate-x: 100%;
slide-out-bottom-10 --vin-exit-translate-y: 2.5rem;
slide-out-bottom-48% --vin-exit-translate-y: 48%;
slide-out-bottom-.8 --vin-exit-translate-y: 0.2rem;
slide-out-bottom-52.1 --vin-exit-translate-y: 13.025rem;
slide-out-bottom-66.6% --vin-exit-translate-y: 66.6%;
slide-out-bottom-100 --vin-exit-translate-y: 25rem;
slide-out-bottom--20 ⚠️ --vin-exit-translate-y: -5rem;
slide-out-bottom--48% ⚠️ --vin-exit-translate-y: -48%;
slide-out-bottom--66.66 ⚠️ --vin-exit-translate-y: -16.665rem;
slide-out-top--20 ⚠️ --vin-exit-translate-y: 5rem;
slide-out-top--48% ⚠️ --vin-exit-translate-y: 48%;
slide-out-top--66.66 ⚠️ --vin-exit-translate-y: 16.665rem;
slide-out-bottom-1/3 --vin-exit-translate-y: 33.3333333333%;
slide-out-bottom--2/3 ⚠️ --vin-exit-translate-y: -66.6666666667%;
slide-out-top--2/3 ⚠️ --vin-exit-translate-y: 66.6666666667%;
slide-out-bottom-full --vin-exit-translate-y: 100%;
slide-out-top-$my-css-var --vin-exit-translate-y: var(--my-css-var);
slide-out-bottom-$my-css-var
slide-out-left-$my-css-var --vin-exit-translate-x: var(--my-css-var);
slide-out-right-$my-css-var

Spin Animations

Define animations's rotate.

Animations Properties

Define various animation properties.