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: 効果値が基になる値と組み合わされます。

加算と累積の違いは微妙です。たとえば、2 つの値 blur(2) と blur(3) を取得します。これらを合計すると blur(2) blur(3) になりますが、累積すると blur(5) になります。

これは、お茶が入ったカップに例えることができます。牛乳を注ぐと、次のようになります。

• replace: お茶が取り除かれ、牛乳に置き換えられます。
• add: ミルクがカップに追加されますが、紅茶の上に層状に残ります。
• accumulate: 牛乳を紅茶に加えると、どちらも液体なのでうまく混ざります。

デモ

以下のデモでは、ベースの transform と animation が適用された 3 つのグレーのボックスがあります。

これらのボックスは同じアニメーションを使用していますが、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) の変換になります。

写真: Alex Boyd（Unsplash）