2

I have a rainbow bar that sits at the top of my page:

.rainbow-bar {    /* Epic rainbow bar */
    height:8px;
    background: black; /* fallback */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 200% 200%;
    animation: moveright 3s ease infinite;
    animation-direction: alternate;
}

So I want the bar to loop forever, moving to the right. I'm bad at explaining so heres an image

This is the current animation code I have which of course just makes it move offscreen then come back, which is exactly what I do not want. If anyone could point me in the right direction I would really appreciate it, thanks.

@keyframes moveright {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Snowman
  • 23
  • 5

2 Answers2

1

So it's kinda tricky to do this with just CSS, however this can be achieved by changing the background gradient on the frames. Codepen link

HTML:

<div class='bg'>
  <div class='rainbow-bar'>
  </div>
</div>

CSS:

.bg {
    background: black; /* fallback */
}

.rainbow-bar {    /* Epic rainbow bar */
    height: 3px;
    animation: move .75s ease infinite;
}

@keyframes move {
  0% {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
  14.3% {
    background: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
  }
  28.6% {
    background: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
  }
  42.9% {
    background: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
  }
  57.2% {
    background: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
  }
  71.5% {
    background: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
  }
  85.8% { 
    background: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
  }
  100% {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
}
AndrewSteinheiser
  • 500
  • 5
  • 17
  • 1
    Thanks for the answer. I thought this would work, but it does look choppy. Is there any way to make it look less choppy? If not I'll just use this. – Snowman Oct 01 '18 at 03:34
  • Hey, I just edited this, check it again. I accidentally mixed up the colors. I've edited the post and codepen to fix that issue. – AndrewSteinheiser Oct 01 '18 at 03:35
0

You do not specify the background size at all when calling the colors. Here is my edit to your code adding in the background size and also changing the keyframes to percentages, not translate.

.rainbow-bar {    /* Epic rainbow bar */
    height:8px;
    background: black; /* fallback */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 200% 200%;
    animation: moveright 3s ease infinite;
    animation-direction: alternate;
}

and the animation part of the css

@keyframes moveright {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
Branden Ham
  • 92
  • 1
  • 1
  • 7