linear 是匀速过渡，属性值以恒定速率变化，如 opacity 500ms 内每 100ms 增加 0.2；ease 则缓入缓出，对应 cubic-bezier(0.25, 0.1, 0.25, 1)，模拟真实惯性运动。
linear 是匀速过渡，没有加速或减速
使用 linear 时，属性值在整段过渡时间内以恒定速率变化。比如从 opacity: 0 到 opacity: 1 持续 500ms，那么每 100ms 就增加 0.2，视觉上像“滑动尺子”一样平直推进。
常见误用场景：按钮悬停变色配 linear，容易显得生硬、机械；动画路径长（如全屏位移）时，人眼会感觉开头太冲、结尾太突兀。
-
transition-timing-function: linear等价于cubic-bezier(0, 0, 1, 1) - 适合需要精确节奏控制的场景：进度条填充、SVG 路径描边动画、与音频波形同步的 UI 变化
- 在低性能设备上，
linear实际更易保持帧率稳定（无复杂插值计算）
ease 是默认缓入缓出，开头慢、中间快、结尾慢
ease 对应的是 cubic-bezier(0.25, 0.1, 0.25, 1)，它模拟了真实世界中物体受力启动和摩擦停止的惯性过程。视觉上，元素“先试探性动一下”，然后加速到峰值速度，最后轻柔收住。
这是浏览器默认值，也是绝大多数交互反馈（如折叠菜单、弹窗浮现）最自然的选择。但要注意：它的“缓出”阶段在短时长（
立即学习“前端免费学习笔记（深入）”；
- 比
linear更符合人类对运动的直觉预期 - 在卡片翻转、模态框淡入等中等时长（300–600ms）动画中效果最均衡
- 若配合 transform 的硬件加速（如
translateZ(0)），ease的插值计算开销几乎可忽略
用 timing-function 可视化工具对比二者差异
仅看定义容易抽象，实际调试建议打开浏览器开发者工具，在 transition-timing-function 属性旁点击小图标（Chrome / Edge 支持），它会显示贝塞尔曲线图和实时预览。把 linear 和 ease 并排拖动对比，能立刻看出斜率变化：
-
linear曲线是一条从左下到右上的直线，斜率恒为 1 -
ease曲线起始斜率接近 0（慢启动），中段陡峭（快运行），末端斜率再次趋近 0（软着陆）
这种斜率差异直接对应“单位时间内的属性变化量”，也就是人眼感知的快慢节奏。
何时该放弃 ease 改用 linear
不是所有场景都适合拟真运动。当过渡本身是“状态切换”而非“物理移动”时，linear 反而更准确：
- 开关控件（toggle）的背景色切换：用
ease会让“开/关”状态边界模糊，linear更干脆 - 数据图表中柱状图高度更新：需强调数值准确性，避免缓动干扰对增长幅度的判断
- 与 JS 动画库（如 GSAP）协同时，若主时间轴已用
linear插值，CSS 过渡也应统一，否则节奏错位
button {
background-color: #ccc;
transition: background-color 200ms linear; /* 短时长 + linear 更利响应 */
}
.chart-bar {
height: 0;
transition: height 300ms linear; / 避免 ease 在数值跃变时产生误导性“弹性” /
}
真正决定视觉差异的不是函数名，而是单位时间内属性值的变化速率曲线——linear 把时间平均切片，ease 把时间按物理惯性重新分配。调错一次 timing-function，可能让整个交互的情绪基调从“专业”变成“迟疑”，或从“轻盈”变成“卡顿”。
