回転後の直進についてコードを作るときの考え方がわかりません。

@keyframes move {
  0% {
    transform: none;
  }
  80% {
    transform: translateX(200px) rotate(360deg);
  }
  100% {
    transform: translateX(300px) rotate(360deg);
  }

この100%ところでrotate(360deg)があるのになぜ直進するのですか？
試しにrotate(360deg)を消してみたら、むしろ回転してしまいました。