animation-composition

Description
Syntax
Examples
Links

Description

The animation-composition property for CSS defines the composite operation used when multiple animations affect the same property simultaneously.

Syntax

CSS

animation-composition: value;

JS

object.style.animationComposition = "value";

Values

<'animation-composition'> = <single-animation-composition>#

<single-animation-composition> = replace | add | accumulate

replace

The result of compositing the effect value with the underlying value is simply the effect value.

add

The effect value is added to the underlying value. For animation types where the addition operation is defined such that it is not commutative, the order of the operands is underlying value + effect value.

accumulate

The effect value is accumulated onto the underlying value. For animation types where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value.

Initial

replace

Examples

1 · replace

2 · add

3 · accumulate

4 · JS

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            33.33%
            {
                background-color: yellow;
                transform: translate(50%);
            }
            66.66%
            {
                background-color: red;
                transform: translate(100%);
            }
        }
        div
        {
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: mykeyframes;
            background-color: green;
            height: 100px;
            transform: rotate(45deg);
            width: 100px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>replace</button>
    <button>add</button>
    <button>accumulate</button>
    <div>animation-composition</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.animationComposition = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>