animation-compositionで初期値を基準にアニメーションする

animation-compositionが使えるようになった。

.ball {
  top: 50px;
  left: 100px;
  animation: slide 1s infinite alternate;
  /* animation-composition: replace; */
  animation-composition: add;
}

@keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 250px;
  }
}

• animation-composition: replace; デフォルト。keyframesで指定した値で上書きされる
• animation-composition: add;初期値の値に keyframes で指定した値が加算される