Replace, add, or accumulate? That’s the question.

Bramus

Combining multiple animation effects

Theanimation-composition property allows control of what should happen when multiple animations affect the same property simultaneously.

Say you have this base transform applied to an element:

transform-origin:50%50%;transform:translateX(50px)rotate(45deg);

And that you also have this set of keyframes:

@keyframesadjust{to{transform:translateX(100px);}}

When applying these keyframes to an element, thetransform in theto keyframe replaces the existingtransform. This is the default behavior.

Withanimation-composition, you now have control over what should happen instead of the defaultreplace. Accepted values are:

• replace: The effect value replaces the underlying value.(default)
• add: The effect value is added to the underlying value.
• accumulate: The effect value is combined with the underlying value.

The difference between addition and accumulation is subtle. For example, take the two valuesblur(2) andblur(3). When added together would this produceblur(2) blur(3), but when accumulated this would produceblur(5).

You could compare this with a cup that is filled with tea. When pouring milk in it this would happen:

• replace: The tea gets removed, and is replaced by the milk.
• add: The milk gets added to the cup, but it remains layered on top of the tea.
• accumulate: The milk is added to the tea and, because they are both fluids, they mix nicely.

Demo

In the demo below there are three gray boxes that have that basetransform andanimation applied to them.

Even though these boxes have the same animation they yield a different result because they have a differentanimation-composition set:

The first box is set toanimation-composition: replace. This is the default behavior. In its end position, the originaltranslateX(50px) rotate(45deg) value fortransform is simply replaced bytranslateX(100px).

The second box is set toanimation-composition: add. In its end position, thetranslateX(100px) is added to the originaltranslateX(50px) rotate(45deg), resulting intranslateX(50px) rotate(45deg) translateX(100px). This moves the box by 50px, then turns it 45deg, and then moves it 100px.

The third box is set toanimation-composition: accumulate. In its end position, thetranslateX(100px) will be mathematically added to thetranslateX(50px) from the original transform, resulting in a transformation oftranslateX(150px) rotate(45deg).

Photo byAlex Boyd onUnsplash