Feedback & Interaction · What a tap feels like
Rubber band橡皮筋拉伸
- stretched to its limit
- volume held
- snapping back
The element stretches sideways while being squashed vertically, then snaps back. The essential part is that it squashes as it stretches — stretch without squash reads as being cropped rather than pulled, because real material does not gain volume.
When to use it
Use it for “that is the limit” feedback: an input at its character cap, a list at its end, one more item and it overflows. Do not use it for button press feedback — that spot has a far more restrained option (see press feedback).
Parameters
transform: scaleX 1→1.25→1 · scaleY 1→0.75→1 · 600ms ease-out
Recipe
Rubber band → transform: scaleX 1→1.25→1 · scaleY 1→0.75→1 · 600ms ease-out
One sentence for your AI
Build a rubber-band stretch: in a single transform, scaleX goes 1 → 1.25 → 1 while scaleY goes 1 → 0.75 → 1, both over 600ms ease-out. scaleY has to shrink exactly while scaleX grows — stretching without squashing looks like a crop.