transition-timing-function 决定过渡速度节奏，而非 duration；默认 ease 等价于 cubic-bezier(0.25,0.1,0.25,1)，常用内置值有 linear、ease-in、ease-out、ease-in-out；自定义需用 cubic-bezier(x1,y1,x2,y2)，x∈[0,1]，y 可越界实现弹性；多属性过渡须严格按顺序匹配 timing-function；transition-delay 仅推迟监听，非等待，易被中断，应由 JS 控制时机。
transition-timing-function 控制速度节奏
过渡效果“快慢不一”的核心不在 duration，而在 transition-timing-function。它决定属性值如何随时间变化——是匀速、先慢后快、还是带弹性回弹。浏览器默认用 ease（等价于 cubic-bezier(0.25, 0.1, 0.25, 1)），但多数真实交互需要更精准的节奏。
常见内置值直接可用：
-
linear：匀速，适合加载条、进度指示 -
ease-in：缓慢起步，适合淡入或向下展开类动效 -
ease-out：快速启动+缓停，适合按钮点击反馈、菜单收起 -
ease-in-out：首尾都放缓，比默认ease更顺滑，推荐用于 hover 按钮
注意：ease-in-out 和 ease 视觉差异细微，但前者在 0.2s–0.3s 的短时长下更不易产生“粘滞感”。
用 cubic-bezier 自定义非线性曲线
内置函数不够用时，cubic-bezier(x1, y1, x2, y2) 是唯一标准方案。它不是“画曲线”，而是定义贝塞尔控制点——x 始终在 0–1 范围，y 可超出（实现 overshoot 或 bounce 效果）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 调试优先用在线工具（如 cubic-bezier.com），拖动控制点实时预览
- 避免 y 值 1 的过度震荡，尤其在按钮上：
cubic-bezier(0.175, 0.885, 0.32, 1.275)看似酷炫，但易显浮夸 - 移动端慎用 overshoot 曲线，touch 事件延迟叠加后，用户会感觉“点了没反应”
- 若需“缓入+缓出+轻微回弹”，可尝试
cubic-bezier(0.34, 1.56, 0.64, 1)，比纯ease-in-out更有呼吸感
多属性过渡必须匹配 timing-function 顺序
当同时过渡多个属性，且想为每个指定不同速度曲线时，不能只写一个 transition-timing-function。必须显式拆分，或按顺序严格对应。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
错误写法（第二项 transform 会继承第一个 ease-in，无法单独设为 linear）：
transition: background-color 0.25s ease-in, transform 0.25s;
正确写法（四项一一对应）：
transition-property: background-color, transform;<br>transition-duration: 0.25s, 0.25s;<br>transition-timing-function: ease-in, linear;<br>transition-delay: 0s, 0s;
更稳妥的做法是分开声明，避免顺序错位导致意外行为。
transition-delay 不是用来“卡顿等待”的
transition-delay 常被误用为“让动画晚点开始”。实际上，它只是推迟浏览器监听属性变更的时间点。一旦在这段延迟期内状态再次改变（比如鼠标快速进出），整个过渡可能被直接丢弃。
典型问题场景：
- hover 按钮加了
transition-delay: 0.3s，用户快速划过时动效完全不触发 - JS 动态切换 class，delay 未清空，导致 class 移除后过渡反向执行（如从 visible → hidden 的收缩）
真正需要节奏控制时，应由 JS 主导：用 setTimeout 控制 class 添加时机，CSS 层面保持 transition-delay: 0s。这样逻辑清晰，行为可预测。
自定义速度的关键，从来不是堆参数，而是理解 timing-function 如何映射到人的感知节奏——0.25s 的 ease-out 比 0.3s 的 ease 更让人觉得“干脆”，这点容易被忽略。
