transition-timing-function 专控过渡节奏，不控制是否动或动多久；ease 默认但不自然，cubic-bezier() 参数需合规，多属性动画须顺序严格匹配。
transition-timing-function 是控制过渡快慢节奏的唯一 CSS 属性，它不决定“动不动”或“动多久”，只管“怎么动”。用错值、漏写、或和 transition-property 顺序不匹配，都会让节奏失控甚至失效。
为什么 ease 看起来“默认但不自然”
浏览器默认用 ease（等价于 cubic-bezier(0.25, 0.1, 0.25, 1)），但它在多数交互中显得头重脚轻：起始太缓，中间冲得太急，收尾又拖沓。比如下拉菜单用 ease，用户会感觉“弹出来一半就刹不住”。
- 按钮悬停变色：用
ease-out更干脆，避免悬停后颜色“慢慢渗出来” - 模态框淡入：
cubic-bezier(0.16, 1, 0.3, 1)比ease-in-out更早达到峰值速度，观感更轻盈 - 绝对不要对
height或width用ease-in—— 它会让元素“卡住起步”，尤其在小尺寸变化时明显顿挫
cubic-bezier() 参数怎么调才不翻车
四个参数不是随便填的数字，而是贝塞尔曲线两个控制点的坐标：cubic-bezier(x1, y1, x2, y2)。x 必须在 0–1 之间，y 可以超出（用来制造回弹或加速效果）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Chrome DevTools 的 Styles 面板里点一下 timing-function 小图标，能直接拖拽调试，比手算靠谱得多
-
cubic-bezier(0.4, 0, 0.2, 1)是较安全的“通用缓出”，适合大多数 hover 和展开动作 - 想模拟物理惯性？试
cubic-bezier(0.34, 1.56, 0.64, 1)—— 注意 y1=1.56 > 1，这是合法且常用的操作 - 千万别写
cubic-bezier(-0.1, 0.5, 1.1, 0.5)这种 x 超出范围的值，部分旧版 Safari 会直接退回到ease
多个属性不同节奏时，顺序错一格就全乱
当你写 transition-property: opacity, transform; transition-duration: 0.2s, 0.3s; transition-timing-function: linear, ease-out;，浏览器严格按逗号分隔的顺序一一对应。错位会导致 opacity 走 ease-out、transform 走 linear，完全反直觉。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：用简写合并，如
transition: opacity 0.2s linear, transform 0.3s ease-out;，视觉上更易核对 - 如果属性数不一致（比如只给
transform设 duration），多余的时间值会被忽略，但 timing-function 仍按位置匹配，极易误判 - 真要复杂节奏，优先拆成多个独立 class 控制，而不是堆在一个元素上硬配
最常被忽略的一点：transition-timing-function 对 display、z-index、font-family 这类不可插值属性完全无效——它只作用于能计算中间值的属性。节奏再精细，前提是你选对了可动画的属性。
