ZUI — Easing

Curves

Hover over each row to see the easing in action.

--easeGeneral purpose

--ease-inAccelerate

--ease-outDecelerate

--ease-in-outSmooth both ends

--ease-elastic-outOvershoot on exit

--ease-elastic-inOvershoot on entry

--ease-elastic-in-outOvershoot both ends

--ease-springSpring physics (linear())

--ease-elastic: var(--ease-elastic-out);
--ease-squish: var(--ease-elastic-in-out);

.button {
  transition: background-color 200ms var(--ease-in-out);
}

.modal {
  animation: slide-in-up 0.4s var(--ease-spring);
}