animation-composition
语法
/* Single animation */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;
/* Multiple animations */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;
/* Global values */
animation-composition: inherit;
animation-composition: initial;
animation-composition: revert;
animation-composition: revert-layer;
animation-composition: unset;
注意：当你在 animation-* 属性上指定多个逗号分隔的值时，它们将按照 animation-name 出现的顺序应用于动画。如果动画和组合的数量不同，animation-composition 属性中列出的值将从第一个 animation-name 循环到最后一个 animation-name，循环直到所有动画都具有分配的 animation-composition 值。有关更多信息，请参阅设置多个动画属性值。
值
replace-
效果值会覆盖属性的底层值。这是默认值。
add (添加)-
效果值在属性的底层值的基础上构建。此操作会产生累加效果。对于添加操作不可交换的动画类型，操作数的顺序是底层值后跟效果值。
accumulate-
效果值和底层值相结合。对于添加操作不可交换的动画类型，操作数的顺序是底层值后跟效果值。
描述
每个由 @keyframes 规则定位的属性都与一个效果堆栈相关联。效果堆栈的值是通过将 CSS 样式规则中属性的底层值与关键帧中该属性的效果值相结合来计算的。animation-composition 属性有助于指定如何将底层值与效果值相结合。
例如，在下面的 CSS 中，blur(5px) 是底层值，而 blur(10px) 是效果值。animation-composition 属性指定在合成底层值和效果值之后执行的操作以产生最终效果值。
.icon:hover {
filter: blur(5px);
animation: 3s infinite pulse;
animation-composition: add;
}
@keyframes pulse {
0% {
filter: blur(10px);
}
100% {
filter: blur(20px);
}
}
考虑上例中 animation-composition 属性的不同值。在每种情况下，最终效果值将按如下方式计算：
- 使用
replace，blur(10px)将在0%关键帧中替换blur(5px)。这是该属性的默认行为。 - 使用
add，0%关键帧中的复合效果值将是blur(5px) blur(10px)。 - 使用
accumulate，0%关键帧中的复合效果值将是blur(15px)。
注意：也可以在关键帧中指定复合操作。在这种情况下，指定的复合操作首先在该关键帧内对每个属性使用，然后对下一个关键帧中的每个属性使用。
正式定义
正式语法
animation-composition =
<single-animation-composition>#
<single-animation-composition> =
replace |
add |
accumulate
示例
理解 animation-composition 值
下面的示例并排显示了不同 animation-composition 值的效果。
HTML
<div class="container">
replace
<div id="replace" class="target"></div>
</div>
<div class="container">
add
<div id="add" class="target"></div>
</div>
<div class="container">
accumulate
<div id="accumulate" class="target"></div>
</div>
CSS
这里底层值是 translateX(50px) rotate(45deg)。
@keyframes slide {
20%,
40% {
transform: translateX(100px);
background: yellow;
}
80%,
100% {
transform: translateX(150px);
background: orange;
}
}
.target {
transform: translateX(30px) rotate(45deg);
animation: slide 5s linear infinite;
}
.target:hover {
animation-play-state: paused;
}
#replace {
animation-composition: replace;
}
#add {
animation-composition: add;
}
#accumulate {
animation-composition: accumulate;
}
结果
- 使用
replace，20%、40%关键帧中transform属性的最终效果值是translateX(100px)（完全替换底层值translateX(30px) rotate(45deg)）。在这种情况下，元素从元素本身设置的默认值动画到 20% 标记处设置的非旋转值时，从 45 度旋转到 0 度。这是默认行为。 - 使用
add，20%、40%关键帧中transform属性的最终效果值是translateX(30px) rotate(45deg) translateX(100px)。因此，元素首先向右移动 100px，围绕原点旋转 45 度，然后向右移动 30px。 - 使用
accumulate，20%、40%关键帧中的最终效果值是translateX(130px) rotate(45deg)。这意味着30px和100px这两个 X 轴平移值被组合或“累加”。
规范
| 规范 |
|---|
| CSS Animations Level 2 # animation-composition |
浏览器兼容性
加载中…