こんにちは。
今回のようにコードを書いた場合以下のようになります。

＞80%のときは、X方向に200px移動したあと、360度回転し、
＞100%のときは、X方向に300px移動したあと、360度回転したまま。（直進）

なぜ、100%のときは、さらに360度回転しないのでしょうか。

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