Animation Composition Demo

It controls how multiple CSS animations affecting the same property are combined. By default (replace), the last animation overrides previous ones. With add, values are summed. With accumulate, values build up across iterations — perfect for progressive effects like score counters or layered motion.

Use replace when you want a new animation to fully take over (e.g., a hover effect replacing a base animation). Use add when you want animations to cooperate — like combining a slow drift with a rapid tremor, or layering a bounce on top of a pan. This avoids the need to write a single complex keyframe that does everything.

Both sum animation values, but accumulate tracks the cumulative total across animation iterations. This matters when using animation-fill-mode: forwards or non-infinite iterations — accumulated values persist and build up. For infinite looping animations (like this demo), add and accumulate appear very similar. The difference becomes clear with finite, non-looping animations.

It works with most animatable properties, but is most useful for transform, translate, rotate, scale, and numeric properties like opacity or margin. For color properties or discrete values, the effect is less intuitive. It shines brightest with transform components where you want independent control over different aspects of motion.

Yes — as of 2024, all major browsers support animation-composition: Chrome 112+, Firefox 115+, Safari 16+, and Edge 112+. It's safe for production use with a fallback (the default replace behavior applies when unsupported). Always test on your target browser range.

animation-composition applies to the entire animation, not per-property. If you need per-property control, split your effects into separate animations and assign each its own composition mode. For example, one animation for translateX with add, and another for opacity with replace.

Imagine a game character that has a walking bob (slow vertical translateY) and a damage shake (fast horizontal translateX). With animation-composition: add, both animations run independently and combine naturally — the character bobs while shaking when hit. Without it, you'd need to manually merge keyframes, which is brittle and hard to maintain.

Use CSS.supports('animation-composition', 'add') or check the computed style of an element. For a fallback, wrap your add/accumulate rules in a @supports (animation-composition: add) { ... } block so unsupported browsers gracefully degrade to replace behavior.