Press
A short, tight spring for button and tap feedback.
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
319 ms
When to use it
Tap feedback has to be fast to feel connected to the finger. A short spring with a hint of bounce gives a physical, rubbery release without slowing anything down.
- Button press and release
- Tap targets on mobile
- Toggle knobs
- type
- spring
- bounce
- 0.25
- perceived
- 0.25s
- settles
- 319 ms
:root {
--ease-press: linear(0, 0.0068 1.5%, 0.0256 3%, 0.0579 4.67%, 0.1041 6.5%, 0.2073 9.83%, 0.556 20%, 0.6561 23.33%, 0.7392 26.5%, 0.8065 29.5%, 0.8656 32.67%, 0.9131 35.83%, 0.9519 39.17%, 0.9831 42.83%, 1.0051 46.67%, 1.027 55.67%, 1);
--ease-press-duration: 319ms;
}
.element {
transition: transform var(--ease-press-duration) var(--ease-press);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-press: ease-out; }
}