transition-timing-function 控制CSS过渡的速度节奏，不决定是否触发或持续时间；常用关键字有ease、linear、ease-in、ease-out、ease-in-out；cubic-bezier()支持自定义贝塞尔曲线；多属性可分别指定对应timing-function；steps()实现离散帧步过渡。
transition-timing-function 用来定义 CSS 过渡过程中速度的变化节奏，直接影响动画是否自然、有无顿挫感。它不控制“动不动”或“动多久”，只管“怎么动”。
常用关键字直接调用
浏览器内置了几个语义化关键字，写法最简单，适合多数基础场景：
- ease：默认值，先慢 → 快 → 慢，适合按钮悬停、卡片浮起等通用交互
- linear：全程匀速，适合进度条推进、滑块拖动等需明确节奏的控件
- ease-in：从静止缓慢启动，适合弹出提示、淡入开场，避免突兀感
- ease-out：快速启动后柔和收尾，常用于下拉菜单展开、折叠面板关闭
- ease-in-out：两端放缓、中间稍快，比 ease 更平滑，适合模态框进出
用 cubic-bezier() 自定义曲线
关键字不够用时，cubic-bezier() 是核心方案。它接收四个 0–1 范围内的数值，代表贝塞尔曲线两个控制点的坐标（x₁, y₁, x₂, y₂）：
例如：transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, -0.22);
这类非标准参数能做出弹性回弹、慢启急停、先顿再冲等拟真效果。推荐在 Chrome DevTools 的 Styles 面板中点击 timing-function 小图标，直接拖拽调节并实时预览。
多属性配不同缓动节奏
当一个元素同时过渡多个属性（如 width 和 opacity），可为它们分别指定节奏：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
写法示例：
transition-property: width, opacity;<br>transition-duration: 0.4s, 0.6s;<br>transition-timing-function: ease-in, ease-out;
注意三项属性必须严格一一对应——第1个 property 对应第1个 duration 和第1个 timing-function，顺序错位会导致节奏错配。
补充：steps() 实现帧步式过渡
适用于模拟翻页、打字机、加载指示器等需要“分段跳变”而非连续渐变的效果：
- steps(3, start)：分3步，起始立即跳第一帧
- steps(4, end)：分4步，最后一步才完成，常用于精灵图动画
它和贝塞尔曲线逻辑完全不同，是离散型过渡，别混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
