Elastic Bounce
弹性回跳
Aliases:弹性回跳果冻效果回弹动画弹簧动效Q弹效果
What is it
The element overshoots its resting point and oscillates once or twice before settling — a springy "boing". It injects physics and playfulness, best saved for success states, reward moments and branded entrances.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Positive peaks — success, rewards, level-ups
- Playful brands that want a signature moment
- Snap-back after releasing a drag
✕ When not to use
- High-frequency buttons — the bounce wears out fast
- Serious contexts — payments, healthcare, legal
- Oversized bounce — past ~10% of size it looks broken
Variants
Overshoot
过冲回落
One overshoot via cubic-bezier(0.34, 1.56, 0.64, 1) — simplest
Jelly
果冻抖动
Keyframed scale 1→1.2→0.9→1 for continuous wobble
Spring drag
拖拽回弹
Snaps back with spring physics on release
Implementation
cubic-bezier(0.34, 1.56, 0.64, 1)@keyframes overshoottransform-origin: centerSimplest recipe — a cubic-bezier with y>1, (0.34, 1.56, 0.64, 1), lets the transition overshoot the end and settle back; multi-oscillation needs explicit keyframed scale sequences. Keep transform-origin centered and the amplitude within 10% of the element's size; with prefers-reduced-motion land on the final state directly.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add an elastic bounce to success and reward moments in the project. Check existing motion tokens and easing variables first; don't invent private curves. Requirements: - Overshoot within 10% of element size, total ≤ 600ms - Only on low-frequency positive moments, never on routine buttons - Centered transform-origin, no layout impact - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
When users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionSimilarAs the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.
MotionSimilarOn completing a key action, a burst of coloured pieces erupts and falls — a one-shot, high-energy celebration. It belongs only to milestones: submission success, task done, subscription reached. Rarity is what gives it weight.
MotionSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsApplies to