默认ease常显“一弹”因等价于cubic-bezier(0.25,0.1,0.25,1)，小范围变化时初段加速度偏大；图标缩放宜用cubic-bezier(0.15,0.6,0.3,0.95)，大体积动作用ease更自然。
直接用 transition-timing-function 控制过渡节奏，别只调 transition-duration —— 后者只是时长，真正决定“突兀还是顺滑”的是缓动曲线。
为什么默认 ease 经常显得“一弹”
浏览器默认的 ease 等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，开头加速度偏大。尤其在小范围变化（比如按钮背景色微调、图标缩放 0.95→1.05）时，人眼会明显感知到“冲”。这不是 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 值影响加速度峰值。别凭感觉拖——先明确问题：
- “开始太猛” → 降低
x1（如从 0.25 改成 0.1），同时可压低y1避免初段陡升 - “结束拖沓” → 提高
y2（接近 1），或把x2往右推（如 0.8→0.95），让曲线末端更陡 - 调试时打开 DevTools，在 Styles 面板里点击
transition-timing-function值右侧的小图标，能直接拖动贝塞尔手柄实时预览
steps() 和预设关键词的实际差异
steps(n, jump-term) 不是缓动，是分步跳变，适合帧动画、数字翻牌、精灵图切换。它和 ease-in 这类关键词完全不在一个维度上，不能混用或互换。
-
steps(4, end)：把过渡分成 4 步，每步在阶段末尾跳变（最常用） -
step-start：第一步立即跳到终点，之后保持不变（类似steps(1, start)） -
step-end：一直保持起始状态，最后一步才跳到终点（类似steps(1, end)） - 写
steps(2.5)或steps(-1)无效，第一个参数必须是正整数
最易被忽略的点：缓动函数再精细，也救不了 transition-duration: 0s 或没声明 transition-property 的元素——它根本不会触发过渡。调曲线前，先确认动画真的跑起来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
