CSS Animation from Left to Right

you have to use only the 'left' not the 'right' parameter on your keyframe. You have also some typo on your css, the 'scale' seems useless too.

#pot{
    bottom:15%;
    position:absolute;
    -webkit-animation:linear infinite alternate;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}

like : online version

Since this question is still getting alot of attention and none of the soulotions yet provide the full answer that I was trying to achieve, I'll give an example how I solved it some years ago.

First to make the animation go left to right, like many other questions have showed:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

The problem with only this solution is that the potato goes too far to the right so it gets pushed out from the viewport before turning around. As the user Taig suggested we can use transform: translate solution, but we can also just set 50% { left: calc(100% - potatoWidth); }

Second to make the animation go left to right, without getting pushed out from viewport:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 100px); 
   }
  100% {
    left: 0;     
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

And lastly to make potato turn around which I also asked for in the question. To do that we need to change the transform around it's y-axis.

Note that if we make it turn around only at 50% it will slowly turn around at the same time it's moving. So we need to specify how long the potato should be at -webkit-transform: rotateY(0deg);. In this example the potato doesn't turn until it's 48% into the animation, then it's able to turn in the span of 48% to 50%.

Third to make the potato turn around in each corner so it doesn't move backwards:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>