See the Code - See it Full Page - See Details
_As of 11/22/2017 this is only present in Firefox Nightly_ The Web Animations API introduces the concept of two animations modifying the same property and evaluating their composite value. through a new timing option property: `composite`. So in the case of a transform, if one animation modifies a `transform: translateX()` and another modifies a `transform: scale()` the API will be able to produce a result that accounts for both... even if they have different easing, duration, iterations, etc. Here I am pushing this to have 40 concurrent animations of different duration on a single element. Each animation is dealing with one `transform` function (a random selection of 8 types of transformations... with the to and from values randomized). The last 39 animations have specified `composite: 'add'` so conceptually at any given point in time the element has 40 transform functions applied, and the browser is doing the interpolations and combining them all in one transform matrix.
This Pen uses: HTML, CSS, JavaScript, and