如何实现HTML CSS弹簧动画效果？

本文共计902个文字，预计阅读时间需要4分钟。

CSS 原生不支持 `spring()` 函数——仅在 Safari 17.4 和 iOS 17.4 中作为实验性特性存在。必须配合 `transition` 或 `@keyframes 中使用的 `animation-timing-function` 使用。其他浏览器（如 Chrome、Firefox）目前不识别此函数，直接写入将降级为 `linear` 或无效值，并显示警告。

所以，真要跨浏览器做出弹簧感，得靠 cubic-bezier() 模拟，或用 JavaScript 库补足。

用 cubic-bezier(0.17, 0.67, 0.83, 0.67) 模拟基础弹簧回弹

这个贝塞尔值是社区验证过较接近弹簧阻尼振荡的近似解，适用于「点击后弹回」类交互（比如按钮按压、抽屉展开）：

button { transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67); } button:active { transform: scale(0.95); }

• 值越靠近 (0, 0, 1, 1)，越接近线性；偏离越大，弹性越强，但过度偏离（如 y2 > 1）会导致反向超调，视觉上“抽搐”
• 该曲线只模拟单次回弹，无法表现多阶震荡（比如真实弹簧晃三下才停），需要 JS 才能分段控制
• 移动端要注意：iOS Safari 对高频率 transform + 弹性缓动组合有时触发渲染卡顿，建议加 will-change: transform 提前提示合成层

用 framer-motion 实现可调参的真实弹簧动画

前端项目若已用 React，framer-motion 是最省心的选择——它把弹簧物理参数（mass、stiffness、damping）暴露给开发者，且自动 fallback 到贝塞尔拟合：

立即学习“前端免费学习笔记（深入）”；

import { motion } from "framer-motion"; <motion.div animate={{ scale: 1.2 }} transition={{ type: "spring", stiffness: 200, damping: 15, mass: 0.5 }} />

• stiffness 越高，弹簧越“硬”，反弹越快；低于 100 会显得绵软拖沓
• damping 控制阻尼，值太小（30）就失去弹簧感，接近缓入缓出
• 注意：服务端渲染（SSR）场景下，首次 hydration 可能因时间戳差异导致动画跳帧，建议加 initial={false} 或用 useIsomorphicLayoutEffect 同步

用 GSAP 的 elastic easing 做精细控制

GSAP 的 elastic 缓动（如 "elastic.out(1, 0.3)"）本质是正弦衰减函数，比贝塞尔更贴近物理模型，且支持超调次数和衰减率：

gsap.to(".box", { x: 200, duration: 1, ease: "elastic.out(1, 0.3)" });

• 第一个参数是超调幅度（1 = 100% 超出目标），第二个是衰减系数（越小震荡越久）
• 它不依赖 CSS，纯 JS 驱动，适合复杂序列动画（比如弹簧+延迟+链式触发）
• ⚠️ 注意：GSAP v3 默认禁用 elastic 等高级 easing，需手动引入 gsap/EasePack 插件，否则报错 Invalid ease: elastic.out

弹簧动画真正的难点不在“怎么动”，而在“什么时候该停”——物理参数调得再准，如果用户快速连续触发，没做节流或中断处理，动画队列就会堆叠、错乱。这点所有方案都绕不开，得自己加逻辑兜底。