HTML中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-in-out，大位移用ease更自然。

html中transition-timing-function设置过渡缓动曲线

默认的 ease 很容易让小范围变化显得“一弹”，这不是 bug，是设计使然——它本就为中等位移优化，直接改用 cubic-bezier() 或更贴切的预设值，比调 transition-duration 有效得多。

为什么 `ease` 默认值经常看起来突兀？

浏览器把 ease 实现为 cubic-bezier(0.25, 0.1, 0.25, 1)，起始段斜率偏大。当变化量小（比如 transform: scale(1) → scale(1.05)、background-color 微调），人眼会立刻察觉“开头猛冲一下”。这不是性能问题，是缓动曲线和交互尺度不匹配。

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

正确写法：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() 和 spring() 这类新值不是全平台稳，且性能敏感场景下，缓动再顺滑也救不了重排属性。

steps(n) 在 Safari 15.4 之前不支持动画中动态更新步数，慎用于进度条类交互
spring() 目前仅 Chrome 120+ / Edge 120+ 原生支持，Firefox 和 Safari 仍需降级 fallback
用 all 触发过渡时，transition-timing-function 会统一作用于所有可过渡属性，但像 height 这种触发重排的属性，即使函数再柔和，性能也远不如 transform + opacity

真正难调的从来不是参数，而是判断“这个交互到底属于哪一类尺度”——微动、中动、大动，对应完全不同的缓动逻辑。很多人卡在反复调 cubic-bezier() 却没先确认变化量是否合理。