Дуги движения (motion arcs) зависят в первую очередь от таймингов

.item {
  animation-name: cart-x, cart-y;
  animation-timing-function:
    var(--x-ease), var(--y-ease);
  animation-composition: accumulate; /* 👈 */
}

@keyframes cart-x {
  to {
    translate: var(--x) 0;
  }
}

Суть в том, что траектория движения формируется не только координатами, но и разными функциями плавности по осям X и Y.

Свойство animation-composition: accumulate позволяет нескольким анимациям накапливать свои трансформации вместо того, чтобы перезаписывать друг друга.

За счёт этого можно комбинировать независимое движение по горизонтали и вертикали, получая плавные дугообразные траектории без сложной математики и без offset-path.

@WebDev_Plus