如何实现 CSS 渐变动画的无缝循环播放

本文详解如何通过精确控制 background-position 与元素尺寸的匹配关系，消除 css 渐变动画在循环时出现的“尖锐起始”（sharp start）或跳变现象，实现真正平滑、无闪烁的无限循环动画。

CSS 渐变动画常被用于创建视觉动感的背景效果，但许多开发者会遇到一个典型问题：动画在每次循环开始时出现明显“卡顿”或“跳回”，即所谓的 sharp start。其根本原因在于 background-position 的终点值未与背景图像（此处为线性渐变）的重复单元（由 background-size 和渐变结构决定）及容器尺寸对齐，导致浏览器在 animation iteration 结束与下一轮开始之间无法自然衔接。

在你提供的代码中，关键问题出在这一行：

to { background-position: 0 100vh; }

100vh 是视口高度（通常远大于 500px），而你的

高度固定为 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 即可达成专业级交互动效。