渐变动画 - 防止 "skipping"

Question

@keyframes gradient-animation {
  from {
    background-position: 100% 0%;
  }

  to {
    background-position: 0% 0%;
  }
}

.animation{
 background: linear-gradient(90deg, #f11e1d, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%, #952491 62.5%, #8cc838 75%, #feb034 87.5%);
 background-size: 200%;
 background-position: 100% 0%;
 
 animation-name: gradient-animation;
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 
 height: 50px;
}

<div class="animation"></div>

我正在尝试制作渐变动画效果，以便过渡到其他颜色。你可以看到我几乎让它工作了，但是在动画结束时颜色 "skip" 回到了开头。我认为这是因为我没有正确设置色标，但我不确定如何解决它。

Answer 1

跳过是因为渐变两端的颜色不同。您可以通过简单地在渐变的末尾添加一种与开始时的颜色相匹配的额外颜色来解决此问题。也就是说，改变这个：

background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%);

对此：

background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%, #f11e1d 100%);

Example on JSFiddle

Answer 2

您可以这样更正它（我添加了额外的值以更好地查看模式）

@keyframes gradient-animation {
  from {
    background-position: 100% 0%;
  }

  to {
    background-position: 0% 0%;
  }
}

.animation{
 background: linear-gradient(90deg, 
 #f11e1d  0%, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%,
 #f11e1d 50%, #952491 62.5%, #8cc838 75%, #feb034 87.5%, #f11e1d 100%);
 background-size: 200%;
 background-position: 100% 0%;
 
 animation-name: gradient-animation;
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 
 height: 50px;
}

<div class="animation"></div>

但为了避免复杂的情况，你可以考虑repeating-linear-gradient，你不必为计算而烦恼。

@keyframes gradient-animation {
  from {
    background-position: 100% 0%;
  }

  to {
    background-position: 0% 0%;
  }
}

.animation{
 background: repeating-linear-gradient(90deg, 
 #f11e1d  0%, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%);
 background-size: 200%;
 background-position: 100% 0%;
 
 animation-name: gradient-animation;
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 
 height: 50px;
}

<div class="animation"></div>

渐变动画 - 防止 "skipping"

Gradient Animation - prevent the "skipping"

css

linear-gradients