Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
アニメーション Widely available

animation-composition

replace・add・accumulate の3つのキーワードでアニメーション効果の合成方法を指定する。デフォルトの replace は既存値を上書きするが、add や accumulate を使うと元の値に加算できる。複数アニメーションを組み合わせる複雑な演出に有用。

アニメーション合成

概要

replace・add・accumulate の3つのキーワードでアニメーション効果の合成方法を指定する。デフォルトの replace は既存値を上書きするが、add や accumulate を使うと元の値に加算できる。複数アニメーションを組み合わせる複雑な演出に有用。

対応ブラウザ

デスクトップ

Chrome 112+
Edge 112+
Safari 16+
Firefox 115+

モバイル

Chrome Android 112+
Safari iOS 16+
Firefox Android 115+

基本構文

CSS 
.element {
  transform: translateX(50px);
  animation: slide 1s ease;
  animation-composition: add;
}

@keyframes slide {
  to {
    transform: translateX(100px);
  }
}
/* add の場合、最終値は translateX(150px) になる */

実務での使いどころ

  • 複合アニメーション

    ベースのtransformを維持しつつ追加のアニメーションを重ねる演出に使う。

注意点

  • 合成モードの違いを正確に理解していないと、意図しない結果になることがある。

アクセシビリティ

  • 複合アニメーションが過度な動きにならないよう、prefers-reduced-motion で制御する。

参考リンク