Css动画从左到右

我想在css中制作一个动画(第一次制作)我在网上看了一些它的例子我无法弄清楚我做错了什么...所以我基本上想要我的马铃薯图像从左到右然后转过来然后再回到左边,但我可能搞砸了我的代码中的一些东西？任何建议我做错了什么或我应该如何面对这个问题？这是我漂亮的代码:

#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% {
    right: 0;
  }
  100% {
    left: 0;
    , webkit-transform: scaleX(-1);
  }
}

#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;}
}