本文详解如何通过精确控制 background-position 与元素尺寸的匹配关系，消除 css 渐变动画在循环时出现的“尖锐起始”（sharp start）或跳变现象，实现真正平滑、无闪烁的无限循环动画。
CSS 渐变动画常被用于创建视觉动感的背景效果，但许多开发者会遇到一个典型问题：动画在每次循环开始时出现明显“卡顿”或“跳回”，即所谓的 sharp start。其根本原因在于 background-position 的终点值未与背景图像（此处为线性渐变）的重复单元（由 background-size 和渐变结构决定）及容器尺寸对齐，导致浏览器在 animation iteration 结束与下一轮开始之间无法自然衔接。
在你提供的代码中，关键问题出在这一行：
to { background-position: 0 100vh; }100vh 是视口高度（通常远大于 500px），而你的 <div> 高度固定为 500px。当动画从 0 0 过渡到 0 100vh 后，下一帧又瞬间跳回 0 0，由于位移量过大且不匹配实际内容节奏，人眼会感知为突兀的“重置”，破坏了平滑感。
✅ 正确做法是：让 background-position 的终点值严格等于背景重复单元在垂直方向上的位移周期。对于 linear-gradient 配合 background-size: cover 的场景，最可靠的方式是将 background-position 的 Y 轴终点设为容器自身的高度（如 500px），前提是渐变本身具备首尾可拼接的连续性（你的渐变以 #FF3155 开始并结束，已满足该条件）：
立即学习“前端免费学习笔记（深入）”；
div {
display: block;
background: linear-gradient(
#FF3155, #FF3155,
#FFAF42, #FFAF42,
#FFED5E, #FFED5E,
#FF3155
);
background-size: 100% 500px; /* 显式定义渐变纹理高度，增强可控性 */
background-repeat: repeat-y;
width: 500px;
height: 500px;
animation: gradient 5s infinite linear;
}
@keyframes gradient {
from { background-position: 0 0; }
to { background-position: 0 500px; } /* 精确匹配容器高度 */
}⚠️ 注意事项：
- 避免使用 background-size: cover 或 contain 于动画背景——它们会动态缩放背景，破坏 background-position 的可预测性；建议改用固定尺寸（如 100% 500px）或 100% 100% 并配合 repeat。
- 渐变色块顺序必须首尾一致（如本例以 #FF3155 起止），否则即使位置对齐，颜色过渡仍会出现断裂。
- 若需响应式适配，可用 CSS 自定义属性 + calc() 动态计算，例如：
--h: 500px; background-size: 100% var(--h); ... to { background-position: 0 var(--h); }
总结来说，“去除 sharp start”的本质不是技巧堆砌，而是理解 CSS 动画中 background-position 的物理意义，并使其位移步长与视觉节奏严格同步。一旦对齐，infinite linear 动画即可如丝般顺滑地无限滚动——无需 JavaScript，纯 CSS 即可达成专业级交互动效。
