Actually, I found a solution after doing a lot more thinking. Here’s a live example and here’s a preview link for you to mess around with. You will have to create 5 divs that act as invisible pixels to trigger 5 interactions on page-load that each affect a different color-filled div. Hopefully that makes sense.
Here are all the elements you need:
Here are the 5 interactions you need to apply to each pixel:
Key note: the last four interactions in my example are initially set to “display: none”.
Hopefully all of this helps you. For this sort of example, I would still recommend using a GIF considering there can be glitches if a user has poor connection that causes a white flash to appear between the cycle. Perhaps that could be fixed by setting each div to appear a millisecond earlier in the loop (the next div is set to “display: block” a millisecond or two before the last one is set to “display: none”) although this will eventually result in the loop getting de-synchronized. Either way, I wish I knew about this months ago…
Best,
Christopher