弹簧动画
Spring Animation
别名:弹簧动画弹簧效果弹一下物理动画回弹落位spring animationspring physicsspringy motion
这是什么
用弹簧物理（刚度、阻尼）驱动的运动：可冲过终点再回落稳定，也可临界阻尼稳稳停住。比固定缓动更有质量感与连续性，适合拖拽落位、开关拨动与强调出现。过冲幅度需克制，避免失控感。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 拖拽松手、开关拨动等需要"落位感"的时刻
- 界面要表达质量、惯性与连续物理
- 强调出现或共享元素归位
✕ 不适用场景
- 高频微操作每次弹跳，很快变吵
- 严肃流程（支付、医疗）需要克制而非活泼
- 只需一次性淡入淡出，弹簧是多余复杂度
常见形式
过冲弹簧
Overshoot spring
冲过终点再回落，最有弹性
临界阻尼
Critically damped
最快稳定且不过冲，最稳重
弹跳
Bouncy
多次衰减振荡，俏皮但易过量
实现要点
cubic-bezier()linear()@keyframestransform: translateCSS 近似弹簧用带回弹的 cubic-bezier(0.34, 1.56, 0.64, 1) 或 keyframes 显式写振荡序列； 精确弹簧可用 linear() 采样或 JS 按 stiffness/damping 积分后写 transform。所有时长写 calc(<时长> * var(--demo-speed, 1))。过冲幅度 ≤ 元素尺寸 10%，transform-origin 居中。 尊重 prefers-reduced-motion，直接落到终态。
平台 API
linear()cubic-bezier()offset-path交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中为落位与强调时刻实现弹簧动画。 先检查现有组件体系和 Design Token，优先复用当前组件。 保持现有项目视觉风格。不要新增不必要依赖。 要求： - 用弹簧式缓动或振荡关键帧表达过冲与稳定 - 过冲幅度克制，所有时长写 calc(<时长> * var(--demo-speed, 1)) - 只用于低频关键时刻，不挂在高频控件上 - 尊重 prefers-reduced-motion 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素到位后不是稳稳停住，而是带一两次越过后回弹的振荡， 像有弹性地"Q 一下"。 给界面注入物理感和俏皮感， 常用于成功状态、奖励时刻或品牌化入场。
动效替代方案用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用