如何选择CSS transition的duration更自然？-css教程-PHP中文网

transition-duration无标准值，应依交互意图设合理区间：悬停变色0.15s–0.25s，菜单下拉0.3s–0.4s，模态框淡入0.25s–0.35s；需匹配timing-function并分写多属性过渡，移动端触控反馈宜更短（0.06s–0.12s），桌面hover可稍长（0.2s–0.25s）。

如何选择css transition的duration更自然？

transition-duration该设多少才不突兀

没有“标准值”，只有匹配交互意图的合理区间。0.15s不是快，0.45s也不是慢——关键看用户此刻在做什么、期待什么反馈。

悬停按钮变色：用 0.15s–0.25s，短到不打断浏览，长到能被感知；菜单下拉展开：用 0.3s–0.4s，给内容位移留出可读缓冲；模态框淡入：选 0.25s–0.35s，太快像闪屏，太慢让人怀疑加载失败。

别凭感觉填数字，先问自己：这个变化是“响应点击”还是“揭示内容”？前者要快，后者要稳。

为什么改了duration还是显得假

单调缩小时长只会让动画更生硬，尤其当 transition-timing-function 没同步调整时。

ease-out：适合收尾动作（如菜单收起、tooltip消失），开头快、结尾缓
ease-in：适合启动动作（如按钮按下、提示弹出），开头慢、结尾快
cubic-bezier(0.34, 1.56, 0.64, 1)：比默认 ease 更轻盈，适合现代 UI 的微动效

例如把下拉菜单从 0.5s linear 改成 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)，节奏感立刻不同——不是更快了，而是“动得更可信”。

多属性过渡时duration怎么配

不同属性物理意义不同，不能共用一个时长。比如背景色变化和位移动画，人眼对它们的敏感度和预期节奏完全不同。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐写法是显式分写：

button {
  transition: background-color 0.2s ease,
              transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1),
              box-shadow 0.25s ease-out;
}

这样既能控制每项节奏，也避免因某项 duration 缺失而回退到 0s 导致跳变。

注意：transition: all 0.3s 看似省事，但会把 font-size、border-width 甚至 z-index 全拖进过渡队列，既无效又拖慢渲染。