Spring Animation
弹簧动画
Aliases:弹簧动画弹簧效果弹一下物理动画回弹落位spring animationspring physicsspringy motion
What is it
Motion driven by spring physics (stiffness, damping): it may overshoot and settle, or stop dead at critical damping. Compared with fixed easing it carries mass and continuity — good for drag snap-into-place, switch throws and emphatic entrances. Keep overshoot modest or it reads as broken.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Snap-into-place moments — drag release, switch throws
- The UI should express mass, inertia and physical continuity
- Emphatic entrances or shared elements snapping home
✕ When not to use
- High-frequency micro actions — the bounce becomes noise
- Serious flows — payments, healthcare — needing restraint
- A plain fade suffices — springs add needless complexity
Variants
Overshoot spring
过冲弹簧
Passes the target then settles — the springiest
Critically damped
临界阻尼
Fastest settle with zero overshoot — the steadiest
Bouncy
弹跳
Several decaying oscillations — playful, easy to overdo
Implementation
cubic-bezier()linear()@keyframestransform: translateApproximate a spring in CSS with a rebounding cubic-bezier(0.34, 1.56, 0.64, 1) or explicit oscillating keyframes; for exact physics use linear() sampling or JS integrating stiffness/damping into transforms. Write every duration as calc(<duration> * var(--demo-speed, 1)). Keep overshoot within 10% of element size with a centered transform-origin. Respect prefers-reduced-motion by landing on the final state.
Platform API
linear()cubic-bezier()offset-pathAgent 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.
Implement spring animation for settle and emphasis moments in the current project. Inspect the existing component system and design tokens first; reuse existing components. Keep the project's visual style. Add no unnecessary dependencies. Requirements: - Express overshoot and settle with spring easing or oscillating keyframes - Keep overshoot modest; write durations as calc(<duration> * var(--demo-speed, 1)) - Reserve for low-frequency key moments, never on high-frequency controls - Respect prefers-reduced-motion Run existing project checks when done and list the 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
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.
MotionAlternativeWhen 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.
MotionUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed with