用纯 CSS 实现"弹簧回弹"

oiloil.org 首页那些“像弹簧一样晃一下”的动效，很多人第一反应是上 Framer Motion。其实大多数场景，一行 CSS 就够了。

关键：超过 1 的 cubic-bezier

.spring-in {
  animation: spring-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes spring-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

秘密在 cubic-bezier(0.34, 1.56, 0.64, 1) 的第二个参数——1.56 比 1 大，意味着中间过程会“越过目标值再回来”，这就是 overshoot，也就是弹簧感。

什么时候才需要 JS

只有当弹簧参数要跟物理交互挂钩时——比如跟手拖拽、速度继承——才值得上真正的 spring 物理库。按钮入场、弹窗出现这种一次性动画，CSS 永远是首选：零依赖、GPU 加速、还自动尊重 prefers-reduced-motion（记得加媒体查询）。