transition-timing-function 决定过渡节奏而非时长，ease默认值等价于cubic-bezier(0.25,0.1,0.25,1)，小范围变化易显“一弹”；需据交互方向选缓入或缓出，并严格按顺序为多属性配函数。
直接用 transition-timing-function 控制过渡节奏，别只靠 transition-duration 调“快慢”——后者只是时长，真正决定是否突兀、是否顺滑的是缓动曲线。
为什么 ease 默认值经常显得“冲”？
浏览器默认的 ease 等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，开头加速度偏大，尤其在小范围变化（比如按钮背景色微调、图标缩放）时，人眼会明显感知到“一弹”。这不是 bug，是设计使然：它本为中等尺寸、中等位移的元素优化。
- 图标 hover 变色/缩放，建议改用
cubic-bezier(0.15, 0.6, 0.3, 0.95)或ease-in-out - 面板展开类大体积变化，
ease反而更自然 - 旧版安卓 WebView 对
linear解析不稳定，真要匀速请直接写cubic-bezier(0, 0, 1, 1)
多个属性怎么配不同缓动函数？
必须严格按顺序一一对应，漏一个或数量不匹配，浏览器会静默截断多余项，未匹配的属性回退到 ease。
- 正确写法：
transition-property: opacity, transform;+transition-duration: 0.3s, 0.4s;+transition-timing-function: ease-out, cubic-bezier(0.3, 0, 0.7, 1); - 错误写法：
transition: opacity 0.3s ease-out, transform 0.4s;—— 后者没指定函数，实际生效的是ease - 更安全的替代：对每个属性单独写完整
transition，比如opacity 0.3s ease-out和transform 0.4s cubic-bezier(...)并列
cubic-bezier() 怎么调才不瞎蒙？
参数是两个控制点坐标：cubic-bezier(x1, y1, x2, y2)，x 值影响启动/收尾节奏，y 值影响加速度峰值。别凭感觉拖——先明确问题：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- “开始太猛” → 降低
x1（如从 0.25 改成 0.1），同时可压低y1避免初段陡升 - “结束拖沓” → 提高
y2（接近 1），或把x2往右推（如 0.8→0.95），让曲线末端更陡 - 调试时打开 DevTools，在 Styles 面板里点击
transition-timing-function值右侧的小图标，能直接拖动贝塞尔手柄实时预览
transition-timing-function 容易被忽略的兼容性坑
不是所有值都全平台稳：
-
steps()在 Safari 15.4 之前不支持动画中动态更新步数，慎用于进度条类交互 -
spring()（CSS Easing Functions Level 2）目前仅 Chrome 120+ / Edge 120+ 原生支持，Firefox 和 Safari 仍需降级 fallback - 用
all触发过渡时，transition-timing-function会统一作用于所有可过渡属性，但像height这种触发重排的属性，即使函数再柔和，性能也远不如transform+opacity
真正难的不是写出一条 cubic-bezier()，而是判断某个交互到底该“缓入”还是“缓出”——这得看状态变化的方向性：用户主动触发（hover、click）适合缓入；系统反馈类（加载完成、校验失败）更适合缓出，让人有预期收口感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
