CODEWITHSUNDEEP
csslinear-gradients
Jordan Carter
Jordan Carter

Reputation: 1336

Gradient Animation - prevent the "skipping"

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.

Upvotes: 3

Views: 417

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

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>

Upvotes: 3

Aziz
Aziz

Reputation: 20705

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

Upvotes: 2

Related Questions