Widely availableSupported across all major browsers. Safe to use in production.
Animation Widely available

animation-composition

The animation-composition CSS property chooses how to combine animations that affect the same property.

Animation

Overview

The animation-composition CSS property chooses how to combine animations that affect the same property.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
animation-composition
112
112
115
16
112
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.element {
  transform: translateX(50px);
  animation: slide 1s ease;
  animation-composition: add;
}

@keyframes slide {
  to {
    transform: translateX(100px);
  }
}
/* When `add` is used, the final value becomes `translateX(150px)` */

Live demo

Replace(default)

animation-composition Replace(default) demo.

PreviewFullscreen

Add(additioncomposite)

animation-composition Add(additioncomposite) demo.

PreviewFullscreen

Accumulate

animation-composition Accumulate demo.

PreviewFullscreen

Use cases

  • Using animation-composition

    The animation-composition CSS property chooses how to combine animations that affect the same property.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features