Easings and animations

Easings

Ease

ease-1

ease-2

ease-3

ease-4

ease-5

Ease-in

ease-in-1

ease-in-2

ease-in-3

ease-in-4

ease-in-5

Ease-out

ease-out-1

ease-out-2

ease-out-3

ease-out-4

ease-out-5

Ease-in-out

ease-in-out-1

ease-in-out-2

ease-in-out-3

ease-in-out-4

ease-in-out-5

:root, ::backdrop {
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  --ease-in-1: cubic-bezier(0.3, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(0.66, 0, 1, 1);
  --ease-in-4: cubic-bezier(0.83, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, 0.8, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.6, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.4, 1);
  --ease-out-4: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
}

Animations

Fade

--fade-size: 0;

Scale

--scale-size: 0.95;

--scale-in-size: 0.95;

--scale-size: 1.05;

--scale-in-size: 1.05;

--scale-size: 1.05;

--scale-out-size: 1.05;

--scale-size: 0.95;

--scale-out-size: 0.95;

Slide

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

Slide Logic

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-in-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

--slide-size: 100%;

--slide-out-size: 100%;

Collapse

--collapse-size: 100%;

--collapse-in-size: 100%;

--collapse-size: 100%;

--collapse-out-size: 100%;

--collapse-size: 100%;

--collapse-in-size: 100%;

--collapse-size: 100%;

--collapse-out-size: 100%;

For collapse-* animations, the Jolty library is used, read more in the Transition section

Other

--shake-x-size: 2.5%;

--shake-y-size: 2.5%;

--spring-size: 1.02;

--blink-size: 0.25;

--pulse-size: 0.9;

:root, ::backdrop {
  --animation-fade-in: fade-in var(--duration-3) var(--ease-3);
  --animation-fade-out: fade-out var(--duration-3) var(--ease-3);
  --animation-scale-out-up: scale-out-up var(--duration-3) var(--ease-3);
  --animation-scale-out-down: scale-out-down var(--duration-3) var(--ease-3);
  --animation-scale-in-up: scale-in-up var(--duration-3) var(--ease-3);
  --animation-scale-in-down: scale-in-down var(--duration-3) var(--ease-3);
  --animation-slide-out-up: slide-out-up var(--duration-3) var(--ease-3);
  --animation-slide-out-down: slide-out-down var(--duration-3) var(--ease-3);
  --animation-slide-in-up: slide-in-up var(--duration-3) var(--ease-3);
  --animation-slide-in-down: slide-in-down var(--duration-3) var(--ease-3);
  --animation-slide-out-right: slide-out-right var(--duration-3) var(--ease-3);
  --animation-slide-out-end: slide-out-end var(--duration-3) var(--ease-3);
  --animation-slide-out-left: slide-out-left var(--duration-3) var(--ease-3);
  --animation-slide-out-start: slide-out-start var(--duration-3) var(--ease-3);
  --animation-slide-in-right: slide-in-right var(--duration-3) var(--ease-3);
  --animation-slide-in-end: slide-in-end var(--duration-3) var(--ease-3);
  --animation-slide-in-left: slide-in-left var(--duration-3) var(--ease-3);
  --animation-slide-in-start: slide-in-start var(--duration-3) var(--ease-3);
  --animation-collapse-in: collapse-in var(--duration-3) var(--ease-3);
  --animation-collapse-out: collapse-out var(--duration-3) var(--ease-3);
  --animation-collapse-width-in: collapse-width-in var(--duration-3) var(--ease-3);
  --animation-collapse-width-out: collapse-width-out var(--duration-3) var(--ease-3);
  --animation-shake-x: shake-x 0.5s var(--ease-out-5);
  --animation-shake-y: shake-y 0.5s var(--ease-out-5);
  --animation-spring: spring var(--duration-3) var(--ease-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

Usage

In the example below, we use the scale-out-up animation, but with a custom scale size.

.component {
  animation: var(--animation-scale-out-up) var(--animation-fade-out);
  --scale-size: 1.5;
}