CSS 属性 animation-composition 定义当多个动画同时作用于同一属性时要应用的复合操作。
- 在 CSS 动画中，@keyframes 所针对的属性具有关联的效果堆栈。
- 效果堆栈的值是 CSS 样式规则中的基础属性值与关键帧中属性的效果值组合的结果。
- animation-composition 属性定义为特定属性组合这些值的方法。
可能的值
- replace - 默认值是效果值，该值优先于属性的基础值。
- add - 效果值通过加法操作增加现有属性值。对于 add 操作不可交换的动画类型，操作数的顺序是基值后跟效果值。
- accumulate - 效果和基础值合并。在加法运算不可交换的动画类型中，操作数的顺序是基值后跟效果值。
语法
animation-composition = <single-animation-composition>#
<single-animation-composition> = replace | add | accumulate
适用对象
所有 HTML 元素。
CSS animation-composition - 替换 Value
以下示例演示了 value replace 在 animation-composition 中的用法。替换合成 （#replace-demo） 会导致框在每次动画迭代开始时重置为其起始位置，并完全替换之前的状态。
<html>
<head>
<style>
@keyframes moveRight {
0%, 100% {
transform: translateX(0);
background-color: lightblue;
}
50% {
transform: translateX(100px);
background-color: lightcoral;
}
}
.box {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
animation-duration: 2s;
animation-iteration-count: infinite;
border: 2px solid #333;
}
#replace-demo {
animation-name: moveRight;
animation-composition: replace;
}
.container {
text-align: center;
margin-top: 50px;
}
.label {
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="label">Replace Composition</div>
<div class="box" id="replace-demo"></div>
</div>
</body>
</html>
CSS animation-composition - 添加值
以下示例演示了 animation-composition 中 add value 的用法。添加合成 （#add-demo） 会导致一种加法效果，在该效果中，随着移动的累积，框在每次迭代中进一步向右移动。
<html>
<head>
<style>
@keyframes moveRight {
0%, 100% {
transform: translateX(0);
background-color: lightblue;
}
50% {
transform: translateX(100px);
background-color: lightcoral;
}
}
.box {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
animation-duration: 2s;
animation-iteration-count: infinite;
border: 2px solid #333;
}
#add-demo {
animation-name: moveRight;
animation-composition: add;
}
.container {
text-align: center;
margin-top: 50px;
}
.label {
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="label">Add Composition</div>
<div class="box" id="add-demo"></div>
</div>
</body>
</html>
CSS animation-composition - 累积值
以下示例演示了 cum 值在 animation-composition 中的用法。累积合成 （#accumulate-demo） 也累积转换，但与 add 不同的是，它保留以前的状态而不重置，从而导致多次迭代中不断累积转换。
<html>
<head>
<style>
@keyframes moveRight {
0%, 100% {
transform: translateX(0);
background-color: lightblue;
}
50% {
transform: translateX(100px);
background-color: lightcoral;
}
}
.box {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
animation-duration: 2s;
animation-iteration-count: infinite;
border: 2px solid #333;
}
#accumulate-demo {
animation-name: moveRight;
animation-composition: accumulate;
}
.container {
text-align: center;
margin-top: 50px;
}
.label {
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="label">Accumulate Composition</div>
<div class="box" id="accumulate-demo"></div>
</div>
</body>
</html>
