HTML中CSS transition-timing-function常用缓动曲线效果对比-html教程-PHP中文网

默认ease在小范围变化时易“一弹”，因其cubic-bezier(0.25,0.1,0.25,1)起始斜率大，人眼对微动初段加速度敏感；微动宜用cubic-bezier(0.15,0.6,0.3,0.95)，大位移用ease更自然。

html中css transition-timing-function常用缓动曲线效果对比

默认 ease 在小范围变化（比如图标缩放 0.98→1.02、背景色微调）时容易“一弹”，不是 bug，是它本就为中等位移设计；真要顺滑，得换缓动函数，而不是只调 transition-duration。

为什么 `ease` 经常显得突兀

浏览器把 ease 实现为 cubic-bezier(0.25, 0.1, 0.25, 1)，起始段斜率偏大。小位移下人眼对初段加速度极其敏感，会立刻察觉“猛冲一下”。这不是性能问题，是曲线和交互尺度不匹配。

图标 hover 缩放、按钮变色这类微动，建议改用 cubic-bezier(0.15, 0.6, 0.3, 0.95) 或 ease-in-out
面板展开、模态框入场这类大体积变化，ease 反而更自然
旧版安卓 WebView 对 linear 解析不稳定，真要匀速请写 cubic-bezier(0, 0, 1, 1)

多个属性怎么配不同缓动函数

必须严格按顺序一一对应，漏一个或数量不匹配，浏览器会静默截断多余项，未匹配的属性回退到 ease。

影谱

一款AI工具，主要用于汉语电影AI辅助创作平台，适合需要提升相关任务效率的用户。

下载

正确写法：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(0.18, 0.89, 0.32, 1.28) 并列

`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()` 和 `cubic-bezier()` 根本不是一回事

steps(n, jump-term) 不是缓动，是分步跳变，适合帧动画、数字翻牌、精灵图切换。它和 ease-in 这类关键词完全不在一个维度上，不能混用或互换。

steps(4, end)：把过渡分成 4 步，每步在阶段末尾跳变（最常用）
step-start：第一步立即跳到终点，之后保持不变（类似 steps(1, start)）
step-end：一直保持起始状态，最后一步才跳到终点（类似 steps(1, end)）

真正影响“顺滑感”的从来不是时长，而是缓动曲线是否贴合动作尺度；很多人调了半天 transition-duration，却忽略 transition-timing-function 才是决定“突兀还是呼吸感”的开关。另外，cubic-bezier() 再顺滑也救不了重排属性——别给 height 或 left 加复杂缓动，优先用 transform 和 opacity。