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

Question

The effect I want looks like this ->

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?

Answer 1

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> 

Answer 2

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.