指定如何搭配動畫組合使用多個動畫效果

要更換、新增還是累積？這就是問題所在。

Bramus

結合多種動畫效果

animation-composition 屬性可控制多個動畫同時影響同一屬性時應發生的情況。

假設您已將這個基本轉換套用至某個元素：

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

以及這組關鍵影格：

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

將這些主要畫面格套用至元素時，to 主要畫面格中的 transform 會取代現有的 transform。此為預設行為。

現在您可以使用 animation-composition 控制要執行的動作，而不是預設的 replace。可接受的值如下：

• replace：效果值會取代基礎值。(預設)
• add：效果值會加到基礎值。
• accumulate：效果值會與基礎值合併。

「加總」和「累計」的差異很細微，舉例來說，假設有兩個值 blur(2) 和 blur(3)。加總後會產生 blur(2) blur(3)，但累積後會產生 blur(5)。

這就像一杯裝滿茶的杯子。倒入牛奶時，會發生下列情況：

• replace：茶會移除，並替換成牛奶。
• add：牛奶會加入杯中，但仍會分層浮在茶的上方。
• accumulate：牛奶加入茶中，由於兩者都是液體，因此可以充分混合。

示範

在下方的示範中，有三個套用該基本 transform 和 animation 的灰色方塊。

即使這些方塊的動畫相同，但由於 animation-composition 集不同，因此產生的結果也會不同：

第一個方塊設為「animation-composition: replace」。這是預設行為。在最終位置，transform 的原始 translateX(50px) rotate(45deg) 值只會由 translateX(100px) 取代。

第二個方塊設為 animation-composition: add。在最終位置，translateX(100px) 會新增至原始 translateX(50px) rotate(45deg)，產生 translateX(50px) rotate(45deg) translateX(100px)。這會將方塊移動 50 像素，然後旋轉 45 度，再移動 100 像素。

第三個方塊設為 animation-composition: accumulate。在最終位置，系統會將 translateX(100px) 數學運算式加到原始轉換的 translateX(50px)，產生 translateX(150px) rotate(45deg) 的轉換。

相片來源：Alex Boyd 發表於 Unsplash