Controlling infinite CSS animations on the fly 🕹
How animation-composition: add changes the speed and direction of infinite animations without jumps or JavaScript.
If you have tried dynamically changing the speed of an infinite CSS animation, for example speeding up a rotation on hover by simply changing animation-duration, you know the main pain point: the element unpleasantly “jumps” to a random position. Making everything smooth usually means adding JavaScript.
The Frontend Masters blog has published an excellent article on solving this problem elegantly with pure CSS.
The main tool here is animation-composition: add.
Instead of changing the parameters of the current animation, we apply two identical animations to the element at once. The first runs continuously, while the second is paused (paused). On hover, we unpause the second, and thanks to composition: add, their values are added together.
Next comes some math using CSS variables and calc(). By setting the speed factor you want, you can:
- speed up or slow down the animation by a multiplier;
- stop it completely;
- reverse the direction of motion using negative values.
The result: no “jerky” UI or recalculations in JS. Everything is handled by the browser engine. The approach is ideal for interactive loaders, complex background effects or infinite marquees and carousels that react to user actions.