css animation move to left, reappear on right and continue to left - css

Question

How do I make the blue platform look like its going to the left, reappears on the right and continues going left? To me, It's kind of tricky because it starts from the left, if it starts from the right than that would be easier.
*{
padding: 0;
margin: 0;
}
html,body{
height:100%;
}
.container{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
#inner{
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow:hidden
}
#platform{
width:200px;
height:50px;
position: relative;
top: 150px;
background: blue;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
left:0px;
}
50%{
left:-200px;
}
70%{
right:200px;
}
100%{
left:0%
}
<div class="container">
<div id="inner">
<div id="platform"></div>
</div>
</div>

Answer 1

Do it like below:
#inner {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow: hidden
}
#platform {
width: 200px;
height: 50px;
position: relative;
top: 150px;
right: 0;
transform: translate(100%);
margin-left: auto;
background: blue;
animation: move 2s linear infinite;
}
#keyframes move {
to {
right: 100%;
transform: translate(0);
}
}
<div id="inner">
<div id="platform"></div>
</div>
Control the delay to start from the left:
#inner {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow: hidden
}
#platform {
width: 200px;
height: 50px;
position: relative;
top: 150px;
right: 0;
transform: translate(100%);
margin-left: auto;
background: blue;
animation: move 2s linear infinite -1.5s;
}
#keyframes move {
to {
right: 100%;
transform: translate(0);
}
}
<div id="inner">
<div id="platform"></div>
</div>

Answer 2

This is pretty crude, but you get the idea:
https://codepen.io/seanstopnik/pen/164585fcf077f8cefaef6d0f4fbd9dad
body {
padding: 60px;
}
.container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #333;
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: -100px;
height: 60px;
width: 100px;
background: blue;
-webkit-animation: box 2s linear infinite;
animation: box 2s linear infinite;
}
#-webkit-keyframes box {
0% {
transform: translateX(500px);
}
}
#keyframes box {
0% {
transform: translateX(500px);
}
}
<div class="container">
<div class="box"></div>
</div>