调大transition-duration不一定显“慢”，因人眼感知取决于变化量÷时间+缓动曲线；真正可控的“慢感”需用cubic-bezier()拉长起止阶段，配0.3s–0.5s时长，并优先过渡transform/opacity。
过渡效果“变慢”不是单纯拉长 transition-duration，而是调整人眼感知的节奏——关键在缓动函数（transition-timing-function）的选择与微调，配合合理的时间值。
为什么调大 transition-duration 不一定显得“慢”？
设 transition-duration: 2s 看起来反而比 0.4s 更“急”，往往是因为：
- 属性本身变化量小（比如只改 opacity 从 1→0.9），2s 显得拖沓；
- 缓动函数用的是 ease（默认），开头冲、结尾顿，中间段被压缩，实际“有效运动时间”很短；
- 人眼对 0.1s–0.6s 区间的过渡最敏感，超出这个范围容易产生迟滞或断连感。
真正可控的“慢感”来自：
- 用 cubic-bezier() 拉长起始/结束阶段；
- 配合 0.3s–0.5s 的中等时长，避免直接上 1s+；
- 优先过渡 transform 和 opacity，它们硬件加速，动画更稳，慢下来也不卡顿。
cubic-bezier() 怎么配出“慢启动+慢收尾”？
想让过渡看起来从容、不突兀，重点压低曲线两端的速度：
- 第一个控制点 y 值（第二个参数）越小，启动越柔和；
- 第二个控制点 y 值（第四个参数）越小，收尾越舒缓；
- x 值（第一、三个参数）影响时间分布，别设得太偏（如 0.01 或 0.99），否则易触发浏览器解析异常。
常用组合：
- cubic-bezier(0.15, 0.6, 0.3, 0.95)：比 ease-in-out 更平缓，适合面板展开；
- cubic-bezier(0.2, 0.05, 0.3, 0.2)：极慢启动+早衰减，适合弱提示类交互；
- 避免 cubic-bezier(0, 0, 1, 1)（即 linear）用于需要“慢感”的场景——匀速≠慢，它只是没节奏，反而显生硬。
多个属性过渡时，transition-timing-function 容易踩哪些坑？
拆开写多个属性时，函数不是“全局继承”，而是严格按顺序一一对应：
比如：.box { transition-property: width, opacity; transition-duration: 0.4s, 0.2s; transition-timing-function: ease-out, linear; }
→ width 用 ease-out，opacity 用 linear；
但这些写法会出问题：
- transition: width 0.4s, opacity 0.2s; → 两个属性都回退到默认 ease，因为没声明函数；
- transition-timing-function: ease-out, linear, ease-in;（多写一个）→ 浏览器静默截断，第三个无效；
- 混用简写和拆分写法（如先写 transition: all 0.3s ease;，再单独设 transition-timing-function: cubic-bezier(...);）→ 后者会被覆盖，且无报错提示。
现代浏览器能用 linear() 替代 cubic-bezier() 吗？
不能简单替代。linear() 是分段线性函数，语法、用途、兼容性都不同：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
linear() 只在 Chrome 113+/Firefox 115+/Safari 16.4+ 支持，旧版直接忽略整条规则；
- linear(0, 0.3, 1) 表示“前半程走到 30%，后半程走到 100%”，适合做阶梯式慢进；
- 但参数必须单调递增（linear(0, 1, 0.5) 无效），且不能混单位（linear(0, 100%) 失效）；
- 它不能写在 @keyframes 内部，仅限 transition-timing-function 或 animation-timing-function 属性级使用。
如果你的目标是兼容性优先的“慢感”，老老实实用 cubic-bezier() 更稳妥；只有明确支持环境且需要精确分段控制时，才考虑 linear()。
立即学习“前端免费学习笔记（深入）”；
