animation-composition
animation-composition は CSS のプロパティで、複数のアニメーションが同じプロパティに同時に影響する場合に使用する合成演算を指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 112 | 112 | 115 | 16 | 112 | 16 | |
基本構文
CSS
.element {
transform: translateX(50px);
animation: slide 1s ease;
animation-composition: add;
}
@keyframes slide {
to {
transform: translateX(100px);
}
}
/* When `add` is used, the final value becomes `translateX(150px)` */ライブデモ
実務での使いどころ
-
複合アニメーション
ベースのtransformを維持しつつ追加のアニメーションを重ねる演出に使う。
注意点
- 合成モードの違いを正確に理解していないと、意図しない結果になることがある。
アクセシビリティ
- 複合アニメーションが過度な動きにならないよう、prefers-reduced-motion で制御する。