Wobbly
High bounce. Several oscillations before rest.
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
1669 ms
When to use it
With bounce at 0.6 the spring oscillates noticeably. It is mostly useful for demos, games and illustrative motion, and rarely right for productivity UI.
- Illustrative motion
- Games and toys
- Attention-grabbing notifications
- type
- spring
- bounce
- 0.60
- perceived
- 0.6s
- settles
- 1669 ms
:root {
--ease-wobbly: linear(0, 0.0102 0.83%, 0.039 1.67%, 0.0839 2.5%, 0.1552 3.5%, 0.321 5.33%, 0.6668 8.67%, 0.8143 10.17%, 0.9453 11.67%, 1.0439 13%, 1.1236 14.33%, 1.1836 15.67%, 1.2244 17%, 1.2488 18.5%, 1.2527 20.17%, 1.2317 22.17%, 1.1913 24.17%, 1.0579 29.33%, 0.9998 32%, 0.9579 34.83%, 0.9376 37.83%, 0.9414 41.83%, 0.9987 51.33%, 1.0154 57%, 0.9963 76%, 1);
--ease-wobbly-duration: 1669ms;
}
.element {
transition: transform var(--ease-wobbly-duration) var(--ease-wobbly);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-wobbly: ease-out; }
}