动画期间翻转图像

雅各布·戈麦斯

我最近在这里要求动画GIF的帮助，现在我想做更多的事情。我希望gif翻转或翻转时可以说是在到达网页边缘时。该链接将提供更多信息。我曾尝试在关键帧中使用变换比例，但最终得到一个非常有趣的结果。我要他来回奔跑，而不是奔跑然后走回去。

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

亚尔奇·基利奇（Yalcin Kilic）

刚刚编辑了关键帧动画

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。