Bouncy
A lively spring with a visible overshoot and settle.
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.
Publish changes?
Your edits will be visible to everyone.
CancelPublish
825 ms
When to use it
A bounce of 0.35 gives one clear overshoot and a quick settle. Reserve it for moments that deserve personality, like a confirmation, a like, or an item landing in a list, because overused bounce quickly feels toy-like.
- Success and confirmation states
- Playful micro-interactions
- Items landing in place
- type
- spring
- bounce
- 0.35
- perceived
- 0.5s
- settles
- 825 ms
:root {
--ease-bouncy: linear(0, 0.0069 1.17%, 0.0299 2.5%, 0.0661 3.83%, 0.1191 5.33%, 0.2348 8%, 0.619 16%, 0.7297 18.67%, 0.8187 21.17%, 0.8926 23.67%, 0.9514 26.17%, 0.9987 28.83%, 1.0318 31.5%, 1.0603 35.67%, 1.0679 40.5%, 1.0156 59.67%, 1.001 67.83%, 0.9954 79.17%, 1);
--ease-bouncy-duration: 825ms;
}
.element {
transition: transform var(--ease-bouncy-duration) var(--ease-bouncy);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-bouncy: ease-out; }
}