弹簧动画需选对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 补充视觉弹性

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！