Css 渐变动画-防止“渐变”；跳绳；

@关键帧渐变动画{
从{
背景位置：100%0%；
}
到{
背景位置：0%0%；
}
}
.动画{
背景：线性梯度（90度，#F11D，#952491 12.5%，#8cc838 25%，#feb034 37.5%，#F11D 50%，#952491 62.5%，#8cc838 75%，#feb034 87.5%）；
背景大小：200%；
背景位置：100%0%；
动画名称：渐变动画；
动画持续时间：2秒；
动画迭代次数：无限；
动画填充模式：正向；
动画计时功能：线性；
高度：50px；
}

---

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

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

为此：

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

---

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

@关键帧渐变动画{
从{
背景位置：100%0%；
}
到{
背景位置：0%0%；
}
}
.动画{
背景：线性梯度（90度，
#F11D 0%，#952491 12.5%，#8cc838 25%，#feb034 37.5%，#F11D 50%，
#F11D 50%、952491 62.5%、8cc838 75%、feb034 87.5%、F11D 100%；
背景大小：200%；
背景位置：100%0%；
动画名称：渐变动画；
动画持续时间：2秒；
动画迭代次数：无限；
动画填充模式：正向；
动画计时功能：线性；
高度：50px；
}

---

太酷了，我不知道重复的渐变！！嘿，很抱歉再次打扰你，但是你会怎么做，仅仅用两种颜色？@JordanCarter，也许是这样；）是的，我自己刚刚遇到了这个解决方案，但我不喜欢它的效果。谢谢你抽出时间，我很感激！实际上，我发现了这个有用的工具