加载动效（shimmer）循环异常问题修复需求

你的问题根源在于固定像素值的背景位移与背景尺寸，当元素宽度不等于400px时，动画无法和起始状态无缝衔接，导致突兀重启。以下是针对性修复方案：

核心修改思路 #

1. 让渐变首尾颜色一致，消除循环时的颜色断层
2. 使用百分比代替固定像素值，让动画适配任意宽度的元素
3. 调整背景尺寸为元素宽度的2倍，确保动画完整覆盖元素后平滑循环

修复后的代码 #

/* loading shimmer, seamless loop version */
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.shimmer-effect {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background-size: 200% 100%; /* 宽度设为元素的2倍，提供滚动空间 */
}
.gray-shimmer {
  @extend .shimmer-effect;
  /* 首尾颜色统一为#f0f0f0，实现无缝循环 */
  background: linear-gradient(90deg, #f0f0f0, #ededed, #ebebeb, #e8e8e8, #e6e6e6, #f0f0f0);
}
.blue-shimmer {
  @extend .shimmer-effect;
  /* 首尾颜色统一为#005ea2，实现无缝循环 */
  background: linear-gradient(90deg, #005ea2, #0c5799, #135191, #174a88, #1a4480, #005ea2);
}

关键改动解释 #

• 动画位移改用百分比：-100% 表示渐变起始位置在元素左侧外（与元素宽度等宽），100% 表示结束位置在元素右侧外，无论元素宽度是多少，动画都会完整覆盖整个元素后再循环。
• 背景尺寸设为200%：渐变的宽度是元素的2倍，刚好能让动画从左外滚动到右外，完成一个完整的循环周期。
• 渐变首尾颜色一致：避免循环时出现颜色突变，让过渡完全平滑。

内容的提问来源于stack exchange，提问作者D. Thaler