title: animate css gradient array
body: <p>I have a parent div the width of the screen with a set height. I want to animate smaller boxes of equal length inside it. I want to 'slide' the color of the smaller boxes with single a gradient for the parent div. This is one way I have implemented it with every box being a div with variable width:</p>
  
  <p><a href="https://i.stack.imgur.com/rLlMD.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rLlMD.gif" alt="tele"></a></p>
  
  <p>It has issues with mobile display so I need a new solution.
  I know that animating gradients with background position is possible, but what about animating <em>portions</em> of a gradient at a time.</p>
  
  <p>The final version of this would include about 100 smaller boxes inside this div.I am looking for advice so if this makes more sense to just do in a canvas please let me know.</p>