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 |
瀏覽器相容性
載入中…