animation-composition

基线 2023

新可用

自 2023 年 7 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

animation-composition CSS 属性指定当多个动画同时影响同一属性时要使用的合成操作。

语法

css
/* 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-composition 值。有关更多信息，请参阅设置多个动画属性值。

值

replace

效果值覆盖属性的基础值。这是默认值。

add

效果值建立在属性的基础值之上。此操作产生累加效果。对于加法运算不满足交换律的动画类型，操作数的顺序为基础值后跟效果值。

accumulate

效果值和基础值相结合。对于加法运算不满足交换律的动画类型，操作数的顺序为基础值后跟效果值。

描述

每个被 @keyframes @规则目标化的属性都与一个效果栈相关联。效果栈的值是通过将 CSS 样式规则中属性的基础值与关键帧中该属性的效果值组合来计算的。animation-composition 属性有助于指定如何将基础值与效果值组合。

例如，在下面的 CSS 中，blur(5px) 是基础值，blur(10px) 是效果值。animation-composition 属性指定执行的操作，以便在合成基础值和效果值的影响后生成最终效果值。

css
.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)。

注意：合成操作也可以在关键帧中指定。在这种情况下，指定的合成操作首先在该关键帧内的每个属性上使用，然后在下一个关键帧的每个属性上使用。

正式定义

初始值replace
应用于所有元素
继承否
计算值按指定
动画类型不可动画

正式语法

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

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

示例

了解 animation-composition 值

以下示例并排显示了不同 animation-composition 值的效果。

HTML

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)。

css
@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，0%, 20%关键帧中transform属性的最终效果值为translateX(100px)（完全替换底层值translateX(30px) rotate(45deg)）。在这种情况下，元素从45deg旋转到0deg，因为它从元素本身设置的默认值动画到0%标记处设置的未旋转值。这是默认行为。
  • 使用add，0%, 20%关键帧中transform属性的最终效果值为translateX(30px) rotate(45deg)后跟translateX(100px)。因此，元素向右移动30px，旋转45deg，然后沿着重定向的X轴再平移100px。
  • 使用accumulate，0%, 20%关键帧中的最终效果值为translateX(130px) rotate(45deg)。这意味着30px和100px这两个X轴平移值被组合或“累积”。

规范

规范
CSS 动画级别 2
# animation-composition

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅