animation-composition decides how an animation effect combines with the underlying property value. The default replace can override a base transform while keyframes run. add composes the effect with that underlying value. If multiple animations target one property, their composition list follows animation order, so an unreviewed extra animation can change the result.
Make this comfortable
CSS animation-composition: preserve a base transform during an effect
When to use it
A review marker is translated into place by a layout rule. A brief attention cue should move it slightly upward and back without dropping its base translation. The sample supplies a base transform and uses animation-composition: add for the temporary nudge. Keep the animation finite, trigger it only when a new item arrives, and leave a textual status in the interface; motion alone cannot explain the item. Test the initial frame, the peak, and the end, plus the case where the base transform changes at a responsive breakpoint. If a target browser ignores add, the animation may temporarily replace the base transform, so the effect is optional and must not carry essential spatial meaning. A reduced-motion preference removes the animation while preserving the marker's position and text. If several transforms are deeply coupled, a wrapper with one transform per element may be easier to reason about than multiple simultaneous effects on one property. Do not animate dozens of markers indefinitely.
@keyframes review-nudge { 50% { transform: translateY(-.35rem); } }
.review-marker { transform: translateX(.65rem); }
@supports (animation-composition: add) { .review-marker { animation: review-nudge 520ms ease-out 1; animation-composition: add; } }
@media (prefers-reduced-motion: reduce) { .review-marker { animation: none; } }Cost and verification
A short transform animation on one small marker is usually inexpensive, but frequent or simultaneous effects still cost frame work. Profile the real screen if arrival events are common. The fallback matters more than the micro-optimization: if add is unsupported, the base translation may be replaced during the cue. Keep the marker usable in that moment and test target browsers. Composition is not a way to fix a wrong layout position; establish the resting transform first. When changing animation-name or adding another keyframe set, review the parallel composition values and the final computed transform. Motion must remain optional under the user's reduced-motion setting.
Common Mistakes
- Do not assume the default replace preserves a base transform.
- Do not let an unsupported composition alter essential position.
- Do not make motion the only notice that a new item arrived.
Connected lessons
css
reference
web