使用@keyframes css从屏幕外滑动图像

Question

img {
    position: absolute;
    animation: slide 2s;
}
@keyframes slide {
  0% {left: 0%;}
  50% {left:50%;}
  100% {left: 50%;}
    /*0% { left: -150%; }
    35% { left: 50%; }
    65% { left: 50%; }
    100% { left: 100%; }*/
}

我有我的CSS，我试图让我的<img src="./images/test_image.png" />从左侧滑入屏幕，但它在完成后会跳转。我已经看过一些在线资源，但我不能完全理解关键帧的工作方式。

任何帮助或指示都会很棒！ 感谢