弹簧动画 · Spring
英文：Spring
动效与交互难度：入门 ★
🗣️一句话大白话
模拟弹簧回弹：快速到位后轻微过冲再回稳。适合按钮、弹窗、图标这类"有实体感"的反馈，最有生命力。CSS 可用 cubic-bezier 模拟，JS 可用物理弹簧（mass/stiffness/damping）。弹簧的关键是"过冲回弹"而非反复弹跳。给 AI 说"像弹簧回弹一下"它能懂；要精确就指定 stiffness 约 180、damping 约 18。弹窗、卡片、图标用弹簧最有质感，数据面板慎用（晃眼）。
🖼️样图参考
🎬真实场景
弹窗、按钮按压、卡片、图标状态切换、FAB
📮你可以这样说
「【图像模型版】让 [按钮] 的按压反馈像弹簧：快速下压后轻微回弹过冲再回位，总时长约 350ms，回弹幅度不超过 10%。 【HTML/CSS/JS 版】用物理弹簧实现 [弹窗] 入场：stiffness 180、damping 18、mass 1；或用 cubic-bezier(0.34, 1.56, 0.64, 1) 模拟回弹。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：弹簧=反复弹跳；实际通常是"一次过冲回位"
- ▸过冲超过 10% 会显廉价
🚫什么时候别用
- ✗数据看板、长文本、需要稳定不晃的界面
🧩常见变体
物理弹簧（stiffness/damping）过冲回弹弹性缩放
💡小贴士
- ✦回弹幅度 ≤10% 显精致，越大越卡通
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗