CSS animation-composition サンプル

3つのボックスは全て基本値 translateX(30px) を持ち、同じアニメーション translateX(80px) が適用されます。compositionモードの違いで動きが変わります。

回転と移動を同時に適用したとき、replaceモードとaddモードで動きがどう違うか比較できます。

パルス（拡大縮小）とバウンス（跳ねる）を個別に、そしてaddで合成した場合を並べて比較します。