animation-composition
The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
Use cases
-
Using animation-composition
The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.