Flipping an image during animation

Question

I recently requested help here with animating a GIF and now I am wanting to do a little bit more. I want the gif to flip or turn around so to speak when it hits the edge of the web page. The link will provide more information. I have tried using transform scale during the key frames but I end up with a pretty funny result. I want him to run back and forth instead of running and then moonwalking back.

header {
  position: fixed; top: 0px; width: 100%; background-color: white;

}
#sonic-gif {
    position: relative;
    height: 100vh;
    width: 100%;
    display: block;
}
#sonicgif {
    position: relative; 
    animation: runningop 5s linear infinite;
    } 
@keyframes runningop{
    0%,100% {
        left: 0%;
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
}

 #header-img { width: 50px; float:left; font-weight: bold; }
 #nav-bar { font-weight: bold; background-image: blue;}
 #different-stuff { padding: 10px;}
 #logo-name { font-weight: bold; padding-top: 5px;}
 #description { padding-top: 65px; padding-bottom: 15px;}
 #form {padding-top: 15px; padding-bottom: 15px;} 
 #footer { padding-top: 2000px; font-weight: bold;)

<header class="headerZ">
  <div id="logo">
    <img id="header-img" src="https://i.postimg.cc/jStsSmfZ/logo-green-arrow.jpg" alt="company logo">
    <div id="logo-name"> QUANTUM-EXE</div>
    <nav id ="nav-bar">
      <a href="" id -"stuff"> Stuff</a>
      <a href="" id="different-stuff"> Different Stuff</a>
      <a href="" id="more-stuff"> More Stuff</a>
    </nav> 
   </div>
   </header>
   <div id="description" > This is a cool video</div>
   <iframe id="video" src=" https://www.youtube.com/embed/watch?v=BBz-Jyr23M4">
   </iframe>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type = "email" placeholder="Enter your email" required>
      <button id="submit" type="submit" > Submit </button>   
   </form>
   <div id="photobow">
   <img id = "photobow" src="https://i.postimg.cc/ZK1dyBF7/falconendcap-1.jpg" alt="photo of an oneida lever bow">
   <p> This is one of my dream bows</p>
   </div>
<div id = "sonic-gif" >
   
   <img id = "sonicgif" src ="https://i.postimg.cc/pVmySTLY/sonic-sonic-running.gif" alt = "gif of sonic running">
   </div>

<footer id="footer"> 2021 JACOB ROCKS!!!</f

Answer 1

Just edited the keyframe animation

header {
  position: fixed; top: 0px; width: 100%; background-color: white;

}
#sonic-gif {
    position: relative;
    height: 100vh;
    width: 100%;
    display: block;
}
#sonicgif {
    position: relative; 
    animation: runningop 5s linear infinite;
    } 
@keyframes runningop{
    0%,100% {
        left: 0%;
      transform: scaleX(1);
    }
      49% {
        transform: scaleX(1);
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
      99% {
        transform: scaleX(-1);
    }
}




  

 #header-img { width: 50px; float:left; font-weight: bold; }
 #nav-bar { font-weight: bold; background-image: blue;}
 #different-stuff { padding: 10px;}
 #logo-name { font-weight: bold; padding-top: 5px;}
 #description { padding-top: 65px; padding-bottom: 15px;}
 #form {padding-top: 15px; padding-bottom: 15px;} 
 #footer { padding-top: 2000px; font-weight: bold;)

   

<header class="headerZ">
  <div id="logo">
    <img id="header-img" src="https://i.postimg.cc/jStsSmfZ/logo-green-arrow.jpg" alt="company logo">
    <div id="logo-name"> QUANTUM-EXE</div>
    <nav id ="nav-bar">
      <a href="" id -"stuff"> Stuff</a>
      <a href="" id="different-stuff"> Different Stuff</a>
      <a href="" id="more-stuff"> More Stuff</a>
    </nav> 
   </div>
   </header>
   <div id="description" > This is a cool video</div>
   <iframe id="video" src=" https://www.youtube.com/embed/watch?v=BBz-Jyr23M4">
   </iframe>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type = "email" placeholder="Enter your email" required>
      <button id="submit" type="submit" > Submit </button>   
   </form>
   <div id="photobow">
   <img id = "photobow" src="https://i.postimg.cc/ZK1dyBF7/falconendcap-1.jpg" alt="photo of an oneida lever bow">
   <p> This is one of my dream bows</p>
   </div>
<div id = "sonic-gif" >
   
   <img id = "sonicgif" src ="https://i.postimg.cc/pVmySTLY/sonic-sonic-running.gif" alt = "gif of sonic running">
   </div>
 


 





<footer id="footer"> 2021 JACOB ROCKS!!!</f