Css3 Animation - Transform: scaleX(-1) - Go/Back - Size Down - Why?

It is because you need to better handle the switch of scaleX between 1 and -1 Here, as defined, it will take all the animation from 0% to 50% to switch from 1 to -1. You need to defined better keypoints as below

#base {
  height: 150px;
  width: 1000px;
  background-color : #efefef;
  border: solid black 2px;
  position: relative;
}

#base img {
  position : absolute;
  height: 125px;
  bottom: 0px;
  left: 0px;
  animation: run 10s;
	animation-iteration-count: infinite;
}

@keyframes run {
    0%   {left:0px; transform: scaleX(1);}
    50% {left:875px; transform: scaleX(1);}
    51% {transform: scaleX(-1);}
    100% {left:0px; transform: scaleX(-1);}
}

<div id = "base"><img src=""></div>

Note that the alternate direction has been removed as well

If you want to keep the size but rotate back and forth I suggest using transform: rotateY(180deg); to transform: rotateY(0deg); instead of transforming the scale property. Also you might need to add more animation anchors to make the turn instant, instead of slowly rotating the image while its moving.

Example codepen:

Also note; since you've 'resetted' the animation going back and forth from 0% - 50% - 100% you dont really need the 'alternate' option as animation-direction.

try like this

#base img {
  position : absolute;
  height: 125px;
  bottom: 0px;
  left: 0px;
  animation: run 10s infinite;
}

@keyframes run {
    0%   {left:0px;}
    50% {left:875px; transform: scaleX(1);}
    55% {transform: scaleX(-1);}
    95% {transform: scaleX(-1);}
    100% {left:0px;}
}