How to Control Infinite CSS Animations (Part 1 of 2) – Frontend Masters Blog

A deep dive into controlling infinite CSS animations beyond simple pause/play. Using animation-composition: add with a duplicated paused animation, you can accelerate, decelerate, stop, or reverse an already-running infinite animation without causing jumps or glitches. The technique uses CSS custom properties for a speed factor variable, and CSS math functions like abs() and sign() to create a single generic solution that handles all speed and direction cases. Practical examples include rotating elements, marquee animations, glowing borders, and interactive galleries.