css linear() 是专为分段线性缓动设计的新函数，非 linear 关键字替代品；需 chrome 113+/firefox 115+/safari 16.4+ 支持，参数须单调递增且在 0–1 内，仅可用于 transition-timing-function 或动画属性级 animation-timing-function，不可用于 @keyframes 内部。
要用 CSS 的 linear() 函数实现自定义缓动，关键不是“怎么写”，而是“什么时候该用它、怎么写才不被浏览器忽略”。它不是 linear 关键字的替代品，而是为复杂分段线性动画专门设计的新函数，Chrome 113+、Firefox 115+、Safari 16.4+ 才真正稳定支持。
linear() 和 linear 关键字根本不是一回事
linear 是一个关键字，等价于 cubic-bezier(0, 0, 1, 1)，只能表达全程匀速；而 linear() 是一个函数，接受任意多个数值参数（必须是 0–1 范围内的数字），每个值代表动画进度点上的目标状态比例。两者语法、语义、兼容性全不同，混用会直接失效。
-
transition-timing-function: linear→ 合法，所有浏览器都支持 -
transition-timing-function: linear(0, 1)→ 合法，等效于上面那行，但只在现代浏览器生效 -
transition-timing-function: linear(0, 0.3, 1)→ 合法，把动画分成两段：前 50% 时间走到 30% 状态，后 50% 时间走到 100% -
transition-timing-function: linear(0, 0.5 20%, 0.8 60%, 1)→ 合法，带时间偏移标记，更精确控制每段占比 -
transition-timing-function: linear(0, 1, 0.5)→ 无效，数值必须单调递增（否则浏览器静默丢弃整条声明）
写 linear() 时参数顺序和单位必须严格对齐
参数默认按等分时间分配，但你可以显式加百分比标记来重定义每段耗时比例。浏览器会把所有带 % 的标记解析为相对总时长的位置，剩余无标记参数则均匀填补空白区间——这个行为容易误判。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
linear(0, 0.5, 1)→ 三等分：0%→33% 到 0.5，33%→67% 到 1 -
linear(0, 0.5 40%, 1)→ 第一段占 40%，第二段自动占 60%（因为只有两个分隔点） -
linear(0, 0.2 10%, 0.6 50%, 1)→ 10% 处到 0.2，40%（50%−10%）处到 0.6，剩下 50% 到 1 - 任何参数超出 0–1 范围（如
linear(0, 1.2)）或使用 px/%/em 单位（如linear(0, 100%)）都会让整条规则失效
animation-timing-function: linear() 在 keyframes 里不能用
linear() 只能用于 transition-timing-function 或 animation-timing-function 的**属性级声明**，不能写在 @keyframes 内部。很多人想在关键帧里用它控制某一段运动节奏，这是做不到的。
- ✅ 正确：
.box { animation: slide 2s; animation-timing-function: linear(0, 0.7, 1); } - ❌ 错误：
@keyframes slide { from { transform: tx(0); } to { transform: tx(100px); animation-timing-function: linear(0, 0.7, 1); } }（语法错误，animation-timing-function不是 keyframe 块内合法属性） - ⚠️ 替代方案：若需关键帧内分段控制，仍得靠多段
@keyframes+cubic-bezier()拼接，或改用 JS 驱动
真正容易被忽略的是：哪怕你写了完全合规的 linear(0, 0.4 30%, 1)，只要父元素用了 will-change: transform 或开启了硬件加速，某些旧版 Safari 仍可能回退到 ease。上线前务必在真机上验证动画曲线是否按预期分段执行——肉眼判断不准，建议用 Chrome DevTools 的 Animation 面板拖动时间轴逐帧核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
