How To Sync CSS Animations Across Multiple Elements?

animation-css-js-sync.md

Link to original answer in StackOverflow question

I was looking for an alternative solution to those proposed in the question because:

1. I was animating a background color - which can't use the positioning magic in the accepted answer.
2. I wanted to avoid calculations for a very simple animation in my app.

After further research I came across this module by bealearts.

It exposes a very neat API that lets you keep an animation in sync across the app by referring to it's name:

import sync from 'css-animation-sync';
sync('spinner');

Since this seemed a little too good to be true, I tested the library (which is a single short file) in this fiddle and am happy to report it works (hover on the third image and see that I quickly syncs to the second image's animation) :).

Credit: I used the animation from this fiddle by Simurai as a basis for my fiddle.

If anyone wants to replicate the mechanism behind this synchronisation, the code is open, but in it's essence, it uses events listeners for the animation itself as sync points:

window.addEventListener('animationstart', animationStart, true);
window.addEventListener('animationiteration', animationIteration, true);