Easing

Timing functions for transitions and animations, from standard curves to elastic and spring-based easing.

Curves

Hover over each row to see the easing in action.

--ease General purpose

--ease-in Accelerate

--ease-out Decelerate

--ease-in-out Smooth both ends

--ease-elastic-out Overshoot on exit

--ease-elastic-in Overshoot on entry

--ease-elastic-in-out Overshoot both ends

--ease-spring Spring 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);
}