Градиентная анимация - предотвращение "пропуска"

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>

Я пытаюсь сделать эффект градиентной анимации, чтобы перейти на другие цвета. Вы можете видеть, что у меня почти все работает, но в конце анимации цвета "возвращаются" к началу. Я думаю, это из-за того, что у меня не правильно настроены цветовые остановки, но я не уверен, как это исправить.

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

<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>

Answer 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%);

Пример на JSFiddle