置き換え、追加、または蓄積しますか？そこで疑問があります。
複数のアニメーション効果を組み合わせる
animation-composition プロパティを使用すると、複数のアニメーションが同じプロパティに同時に作用したときの動作を制御できます。
この基本変換を要素に適用しているとします。
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
また、次のようなキーフレーム セットがあるとします。
@keyframes adjust {
to {
transform: translateX(100px);
}
}
これらのキーフレームを要素に適用すると、既存の transform が to キーフレーム内の transform に置き換えられます。これがデフォルト設定です。
animation-composition を使用すると、デフォルトの replace の代わりに、動作を制御することができます。次の値が利用できます。
replace: 効果の値によって元の値が置き換えられます。（デフォルト）add: エフェクトの値が基になる値に追加されます。accumulate: 効果値は基になる値と組み合わされます。
加算と累積の違いはわずかです。たとえば、blur(2) と blur(3) の 2 つの値があるとします。これを加算すると blur(2) blur(3) が生成されますが、累積されると blur(5) が生成されます。
これは、お茶が入ったカップと比べることができます。そこに牛乳を注ぐと、次のようになります。
replace: お茶が削除され、ミルクに置き換えられます。add: ミルクがカップに加えられますが、お茶の上に重ねられたままになります。accumulate: ミルクを紅茶に加えます。どちらも液体であるため、うまく混ぜられます。
デモ
以下のデモでは、3 つのグレーのボックスがあり、ベースの transform と animation が適用されています。
これらのボックスのアニメーションは同じでも、animation-composition セットが異なるため、異なる結果が得られます。
最初のボックスは animation-composition: replace に設定されています。これはデフォルトの動作です。終了位置で、transform の元の translateX(50px) rotate(45deg) 値が単に translateX(100px) に置き換えられます。
2 つ目のボックスは animation-composition: add に設定されています。その終了位置で、translateX(100px) が元の translateX(50px) rotate(45deg) に追加され、translateX(50px) rotate(45deg) translateX(100px) になります。これにより、ボックスを 50 ピクセル移動させ、次に 45 度回転させ、さらに 100 ピクセル移動します。
3 つ目のボックスは animation-composition: accumulate に設定されています。その終了位置では、translateX(100px) が元の変換の translateX(50px) に数学的に追加され、translateX(150px) rotate(45deg) の変換になります。