A technique for controlling the speed of infinite CSS animations using `animation-composition: add`. By running the same animation twice with an additive effect and pausing/resuming the second instance via a CSS variable, you can make animations faster, slower, or reverse direction on hover or other interactions. Examples include infinite rotation, a marquee using `offset-distance`, and a glowing border effect animating a CSS variable. A fallback without `if()` is also provided for broader browser support.
Sort: