Gradient Animation - prevent the "skipping" - css

Question

https://jsfiddle.net/2ndjazmy/14/
#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>
I'm trying to make a gradient animation effect, in order to transition into other colours. You can see I almost have it working, but at the end of the animation the colours "skip" back to the beginning. I think it's because I don't have the colour stops set up right, but I'm not sure how to fix it.

Answer 1

You can correct it like this (I added extra values to better see the pattern)
#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>
But to avoid complex situation you can consider repeating-linear-gradient and you don't have to bother about calculation.
#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>

Answer 2

It skips because the colors at the two ends of the gradient are different. You can fix this by simply adding an extra color at the end of the gradient that matches the color at the beginning. That is, changing this:
background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%);
to this:
background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%, #f11e1d 100%);
Example on JSFiddle