HTMLCSSlinear()缓动函数使用教程

CSS 的 `linear()` 函数并非 `linear` 关键字的简单升级，而是一个专为精细控制分段线性缓动设计的现代特性，它允许开发者通过单调递增的 0–1 数值序列（可搭配百分比时间标记）精准定义动画在不同时间段的状态比例，但必须严格遵循语法规范——参数越界、顺序错乱、单位误用或在 `@keyframes` 中使用均会导致整条声明被浏览器静默丢弃；当前仅 Chrome 113+、Firefox 115+、Safari 16.4+ 稳定支持，且受硬件加速等环境因素影响，上线前务必借助 DevTools 动画面板在真实设备上逐帧验证效果，否则精心编写的分段逻辑可能悄然失效。

要用 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() 时参数顺序和单位必须严格对齐

参数默认按等分时间分配，但你可以显式加百分比标记来重定义每段耗时比例。浏览器会把所有带 % 的标记解析为相对总时长的位置，剩余无标记参数则均匀填补空白区间——这个行为容易误判。

• 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 面板拖动时间轴逐帧核对。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTMLCSSlinear()缓动函数使用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。