How to create an animated rainbow line using CSS or Javascript?

Question

The effect I want looks like this ->

enter image description here

I was wondering whether there is an easier way to do this in css/js ? Or is there any library to implement it?

And what if the shape is not a straight line but an irregular curve line?

https://stackoverflow.com/questions/29007257/creating-a-rainbow-effect-in-rectangle-canvas/29015497#29015497 — , Mar 28 '15 at 09:38
@KenFyrstenberg I think that might be a different question because it needs to be implemented by html-canvas... — Hanfei Sun, Mar 28 '15 at 09:48
@KenFyrstenberg yes.. I added html5-canvas only because it might be an option if pure css/js is unable to implement this.. — Hanfei Sun, Mar 28 '15 at 09:50

Akshay · Accepted Answer · 2015-04-22T09:12:34.203

No t exactly like it but try this

.rainbow{
  width:200px;
  height:20px;
  background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
  background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
  background-repeat:repeat-x;
  
  -webkit-animation:go 1s linear infinite;
  -moz-animation:go 1s linear infinite;
  -o-animation:go 1s linear infinite;
  -ms-animation:go 1s linear infinite;
  animation:go 1s linear infinite;
}

@-webkit-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-moz-keyframes go{
  0%{background-position:0;}
  50%{background-position:100px 0;}
  100%{background-position:200px 0;}

}
@-o-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-ms-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}

<div class="rainbow"></div>

With width reduced

.rainbow{
  width:200px;
  height:5px;
  background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
  background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
  background-repeat:repeat-x;
  
  -webkit-animation:go 1s linear infinite;
  -moz-animation:go 1s linear infinite;
  -o-animation:go 1s linear infinite;
  -ms-animation:go 1s linear infinite;
  animation:go 1s linear infinite;
}

@-webkit-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-moz-keyframes go{
  0%{background-position:0;}
  50%{background-position:100px 0;}
  100%{background-position:200px 0;}

}
@-o-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-ms-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}

<div class="rainbow"></div>

remember to support non-webkit browsers (nothing shows in ff) — , Mar 28 '15 at 09:39
I suggest you add `animation-timing-function: linear` and repeat the `red` color at the end. — Hashem Qolami, Mar 28 '15 at 09:48

score 2 · Answer 2 · answered Mar 28 '15 at 09:38

You would need to create a divider and animate it using CSS.

Please refer to already established examples:

https://github.com/codepo8/CSS3-Rainbow-Dividers/blob/master/rainbows.css

for the source code (on the link above shows)

/*
 * CSS animated rainbow dividers of awesome 
 * by Chris Heilmann @codepo8 and Lea Verou @leaverou 
**/
@-moz-keyframes charlieeee {
  from { background-position:top left; } 
  to {background-position:top right; }
}
@-webkit-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-o-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-ms-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@-khtml-keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
@keyframes charlieeee { 
  from { background-position:top left; }  
  to { background-position:top right; }  
}
.catchadream{
  background-image:-webkit-linear-gradient( left, red, orange, yellow, green,
                                          blue, indigo, violet, indigo, blue,
                                          green, yellow, orange, red );
  background-image:-moz-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-o-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-ms-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:-khtml-linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  background-image:linear-gradient( left, red, orange, yellow, green,
                                         blue,indigo, violet, indigo, blue,
                                         green, yellow, orange,red );
  -moz-animation:charlieeee 2.5s forwards linear infinite;
  -webkit-animation:charlieeee 2.5s forwards linear infinite;
  -o-animation:charlieeee 2.5s forwards linear infinite;
  -khtml-animation:charlieeee 2.5s forwards linear infinite;
  -ms-animation:charlieeee 2.5s forwards linear infinite;
  -lynx-animation:charlieeee 2.5s forwards linear infinite;
  animation:charlieeee 2.5s forwards linear infinite;
  background-size:50% auto;
}
#tongue{position:cheek;}
/* ^ OMG! An ID! That kills performance! */

/*
  .catchadream:after{content:'廌'}

*/
/* ^ uncomment to add unicorn */

and for the developers page:

http://codepo8.github.io/CSS3-Rainbow-Dividers/

I didn't create these, merely advising you where to go.

How to create an animated rainbow line using CSS or Javascript?

2 Answers2