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())
Aliases
--ease-elastic: var(--ease-elastic-out);
--ease-squish: var(--ease-elastic-in-out);Usage
.button {
transition: background-color 200ms var(--ease-in-out);
}
.modal {
animation: slide-in-up 0.4s var(--ease-spring);
}