JavaScript runs once, CSS handles a 24 hour animation

[Zegnat]

Somewhere between an interesting experiment and something I wanted to do. No hard feelings if you do not deem it mergable, I will just continue on my fork. There is probably more clean-up that can be done.

This change gets rid of the 4 second JavaScript interval. Instead it generates 24 hour CSS animations once and lets the browser handle it. In the browser profiler this gets rid of rendering and painting steps.

Currently all the elements are added by JavaScript and the animations generated on the fly. Though for even better performance it could have been added straight to the HTML. The only thing JavaScript will always be needed for is to set the animation start time.

This also simplifies the blue hover styling. No more weird blinking in and out of existence for the final coloured rectangle.

Would love to get your opinion on some of these techniques!

[netlify[bot]]

✅ Deploy Preview for melodious-otter-07ba46 ready!

Name	Link
🔨 Latest commit	f074227189d9f682ecf39d1df114c1b2138be170
🔍 Latest deploy log	https://app.netlify.com/sites/melodious-otter-07ba46/deploys/634556278d76100008608768
😎 Deploy Preview	https://deploy-preview-4--melodious-otter-07ba46.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.