Back out
A bezier that overshoots once, with no physics needed.
How to read it
Top row: where the element sits on each frame, so bunched ticks mean slow motion. Bottom row: the same frames in time order, each bar the distance travelled, so the settle is easy to read. Keys are circled.
Invoice sent
to studio@northwind.co
400 ms
When to use it
A control point above 1 makes the curve overshoot and come back. It is a lightweight way to get a single bounce when a full spring is unnecessary, and it works everywhere `cubic-bezier()` does.
- Popovers and tooltips
- Scale-in badges
- Lightweight bounce
- type
- cubic-bezier
- points
- 0.34, 1.56, 0.64, 1
- duration
- 400 ms
- support
- all browsers
:root {
--ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-back-out-duration: 400ms;
}
.element {
transition: transform var(--ease-back-out-duration) var(--ease-back-out);
}