css - 位置を段階的にアニメーション化する

Question

左のプロパティで div 位置をアニメーション化しようとしています。この位置は、すべての期間中、段階的に移動する必要があります。

ここに私のサンプルコードがあります:

#my-div {
  position: relative;
  top: -1291px;
  left: 615px;
  animation: my-div-anim 20s infinite;
  animation-timing-function: step-start;
}

@keyframes my-div-anim {
  0% {left: 615px;}
  20% {left: 800px;}
  40% {left: 985px;}
  60% {left: 1170px;}
  100% {left: 1170px;}
}

しかし、うまくいきません。何が間違っている可能性がありますか?