要取代、新增還是累積？這就是問題所在。
結合多個動畫效果
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)。這會讓方塊移動 50px，然後變成 45deg，然後移動 100px。
第三個方塊已設為 animation-composition: accumulate。在結束位置中，translateX(100px) 會以數學方式新增至原始轉換中的 translateX(50px)，進而產生 translateX(150px) rotate(45deg) 轉換。