弹簧动画需选对cubic-bezier值并搭配transform/opacity等高性能属性，避免layout触发；y值可略超[0,1]（推荐-0.5~2.0），x值须在[0,1]内；禁用display:none，善用visibility+opacity+forwards。
直接在 transition 或 animation-timing-function 中写入自定义 cubic-bezier(x1, y1, x2, y2) 就能启用弹簧物理感，但关键不在“写了”，而在“怎么选值”和“配合哪些属性”。生硬套用网上参数常导致卡顿、跳变或毫无弹性——因为弹簧感是位移节奏+视觉反馈+性能协同的结果。
选对贝塞尔值：不是越弹越好，而是匹配动作意图
弹簧动画的本质是模拟过冲（overshoot）与回弹（rebound），靠的是控制点 y 值超出 [0, 1] 范围：
-
下拉菜单/底部弹出：用
cubic-bezier(0.2, 0.8, 0.4, 1)—— 前段缓慢启动，中段加速拉伸，末段轻微过冲后回正，给人“有重量、有阻尼”的下拉感 -
侧边栏弹出/按钮脉冲：用
cubic-bezier(0.68, -0.55, 0.27, 1.55)—— y₁ 为负实现初始反向压缩，y₂ > 1 实现明显过冲，再回落，形成“啪地弹开”的反馈 -
加载小球跳动：用
cubic-bezier(0.17, 0.67, 0.83, 0.67)—— 对称波形，适合循环轻量弹跳，避免视觉疲劳
注意：x₁ 和 x₂ 必须严格在 0–1 之间；y₁/y₂ 可略超限（推荐 -0.5 至 2.0），超出太多（如 y = 3.0）会被 Chrome 静默降级为 linear。
必须搭配可插值且高性能的属性
弹簧感不能只靠曲线，更依赖动画属性本身的渲染机制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 避免直接过渡
height、width、top、left—— 它们触发 layout + paint，卡顿明显，且height: auto无法插值，动画会跳变 - 优先使用
transform（如translateY、scaleY、translateX）和opacity—— 这些走合成器线程，60fps 稳定，支持 GPU 加速 - 做下拉菜单时，用
max-height+overflow: hidden替代height；做侧边栏时，固定宽度，用transform: translateX(-300px)隐藏
结构与状态管理不能拖后腿
再好的贝塞尔曲线，也会被错误的状态切换毁掉：
- 别用
display: none控制显隐 —— 它会中断 transition 流程，导致动画不执行；改用visibility: hidden+opacity: 0+pointer-events: none - 若元素初始为
display: none，需先设为display: block（或 inline-block），再触发动画，否则无过渡效果 - 动画结束需停留最终状态？加
animation-fill-mode: forwards；交互中频繁触发？考虑加will-change: transform（仅激活态添加，避免常驻开销）
调试建议：边调边看，拒绝盲抄
贝塞尔参数不是魔法数字，要结合具体场景微调：
- 在浏览器 DevTools 的动画面板里直接拖动控制点，实时预览节奏变化
- 总时长建议 0.3s–0.6s：太短（0.8s）失去瞬时反馈感
- 移动端尤其注意 iOS Safari 兼容性——负 y 值（如 -0.55）在旧版 iOS 可能 fallback，可用
transform: scaleY()+origin-bottom补充视觉弹性
