The hack is that we restart the animation
to have the new custom property values picked up by our animation. Once the animation restarts, though, it is clear sailing where our custom properties control how our animation runs.
This restart trick is something that wasn’t possible, at least not in a cross-browser way across mobile and desktop devices. This restart trick combined with custom properties is the magic one-two trick that allows our CSS animations to be customizable once it starts running.
Why does this matter?
This opens the door for more interactive animations that either react to user behavior or do something more random beyond what we were capable of accomplishing with just CSS transitions
. For example, we can create an animation as follows where the position of the circle is randomly repositioned each time the animation loops: