animation-composition を使用して複数のアニメーション効果を組み合わせる

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) の 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) の変換になります。