渐变动画 - 防止“跳过”答案

【问题标题】：Gradient Animation - prevent the "skipping"渐变动画 - 防止“跳过”
【发布时间】：2018-06-19 22:58:08
【问题描述】：

@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;
}

&lt;div class="animation"&gt;&lt;/div&gt;

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

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

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

@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;
}

&lt;div class="animation"&gt;&lt;/div&gt;

但为了避免复杂的情况，你可以考虑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;
}

&lt;div class="animation"&gt;&lt;/div&gt;

【讨论】：

太酷了，我不知道重复渐变！
嘿，很抱歉再次打扰您，但是您将如何只为两种颜色执行此操作？
@JordanCarter 可能是这样的jsfiddle.net/0cxpjs4d/3 ;)
是的，我自己也遇到过这种解决方案，但我不喜欢这种效果。谢谢你的时间，我很感激！实际上，我发现了这个有用的工具gradient-animator.com

【解决方案2】：

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

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

【讨论】：