本文详解如何通过精准控制 `background-position` 与元素尺寸的匹配，消除 css 渐变动画在循环时出现的“尖锐起始”（sharp start）或跳变现象，实现真正平滑、无闪烁的无限循环效果。
在使用 linear-gradient 配合 background-position 实现滚动式渐变动画时，最常见的“卡顿”或“突兀重置”问题，根源在于动画终点（to 或 100%）的 background-position 值未与元素实际尺寸对齐。你提供的代码中使用了 100vh，这是一个视口单位，而非容器自身高度——当
高度为 500px，但视口高度可能为 720px 或 1080px 时，background-position: 0 100vh 就会超出预期位移量，导致动画循环时背景无法首尾衔接，从而产生视觉跳跃。
✅ 正确做法是：让 background-position 的位移值严格等于渐变背景重复周期所对应的物理距离。对于垂直滚动动画，若希望背景完整“滚动过”整个容器一次，则终点 background-position 的 Y 轴值应等于容器高度（如 500px），而非 100vh。
以下是修正后的完整 CSS 示例：
div {
display: block;
/* 使用 repeating-linear-gradient 或明确多色过渡的 linear-gradient */
background: linear-gradient(
to bottom,
#FF3155, #FF3155 20%,
#FFAF42 20%, #FFAF42 40%,
#FFED5E 40%, #FFED5E 60%,
#FF3155 60%, #FF3155 80%
);
background-size: 100% 300%; /* 关键：增大 height 倍数以提供滚动空间 */
width: 500px;
height: 500px;
animation: gradient 5s infinite linear;
}
@keyframes gradient {
from {
background-position: 0 0;
}
to {
background-position: 0 500px; /* ✅ 精确匹配 div 高度 */
}
}? 进阶提示：
立即学习“前端免费学习笔记（深入）”；
- background-size: 100% 300% 表示背景图像在垂直方向拉伸为容器高度的 3 倍，确保渐变色带足够长，避免因重复过快造成条纹感；
- 若使用 cover（如原代码），它会强制缩放背景填满容器，破坏渐变节奏——请改用显式的 background-size（如 100% 300%）并配合 background-repeat: no-repeat（默认）；
- 动画时间（5s）可自由调整，但务必保持 from → to 的位移与 background-size 中的纵向比例协调，才能保证循环自然。
⚠️ 注意事项：
- 不要混用 background-size: cover 与 background-position 动画——cover 是响应式缩放模式，会动态改变背景图像尺寸，使 background-position 的像素值失去可预测性；
- 若需适配响应式布局，建议用 vmax/vmin 或 JS 动态设置 --bg-height CSS 变量，并在 @keyframes 中引用（CSS 自定义属性 + @property 可实现更可控的动画）；
- 纯 CSS 方案完全可行且性能优异，无需引入 JavaScript——只要理解“位移闭环”原理：animation 的终点必须精确还原起点的视觉状态。
总结：消除“sharp start”的本质，是构建一个位移闭环（displacement loop）——即动画结束帧的背景位置，恰好使下一轮动画起始帧呈现完全相同的视觉状态。这要求开发者主动将 background-position 数值与容器几何尺寸（而非视口或任意常量）绑定。一旦掌握这一原则，所有基于 background-position 的平滑循环动画（如波浪、扫描线、霓虹流动等）都将迎刃而解。
