弹性Spring
你可能会说
弹窗出现时带一点回弹，像弹簧那样轻轻晃一下。
弹性动画是一种用刚度、阻尼和质量等物理参数计算运动的动效方式拖拽卡片松手后的回弹可使用 spring，通过参数控制速度、过冲和停止方式。CSS transition 没有通用原生 spring 类型，通常需要动画库或经过设计的缓动 Easing近似；它不适合严肃确认、持续阅读或让所有元素同时弹动。
也常被叫作弹簧动画回弹动效Spring Animation
组成结构 · Anatomy
刚度 stiffness阻尼 damping目标值
弹簧多硬，决定运动多快
摩擦力多大，决定晃几下停
数值短暂越过目标后回到稳定位置
最终停住的位置
常见变体 · Variants
硬弹簧Stiff
干脆利落，工具型产品
软弹簧Soft
温和活泼，内容社交产品
无过冲No Bounce
要活感但不要回弹
典型使用场景
拖拽松手回弹
原来的位置
首页改版走查
拖拽中…松手回弹
spring：松手冲回原位，轻轻过冲再停稳，像有物理质量
弹窗活泼入场
scale 短暂越过 1 后回到稳定值；残影表示上一帧位置
开关拨动手感
通知提醒
滑块短暂越过目标位置后回弹；左侧残影表示运动轨迹
下拉菜单展开
进行中
▾
全部状态
进行中
已完成
从触发点弹性展开：scale 0.96 → 1，虚线是上一帧