SVG animation-composition Property

The Problem of Overlapping SVG Animations

When two separate CSS animations target the same property on an SVG element at the same time, such as one animation handling a continuous rotation and another handling a hover-triggered scale bump, the default replace behavior means the second animation to apply simply overrides the first rather than combining with it as most developers intuitively expect.

• Two animations targeting the same property default to one replacing the other
• This default often doesn't match the combined effect a developer actually wants
• Common with combinations like continuous rotation plus a hover scale animation

Using animation-composition Values to Combine Effects

Setting animation-composition: add or accumulate on the relevant animations changes how they combine, letting a continuous background rotation animation and a separate hover-triggered scale animation both apply simultaneously to the same SVG element, producing a combined rotate-and-scale effect rather than one animation simply overriding the other.

• add and accumulate values let multiple animations combine rather than replace
• Enables effects like simultaneous continuous rotation plus hover-triggered scale
• Gives fine control over exactly how overlapping animation effects should combine

Frequently Asked Questions

Related guides