在动画期间翻转图像
Posted
技术标签:
【中文标题】在动画期间翻转图像【英文标题】：Flipping an image during animation 【发布时间】：2021-05-14 07:41:57 【问题描述】：我最近在这里请求帮助制作 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" >
<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" >
<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【问题讨论】：
codepen.io/jacobgomez1993/pen/MWjZxeG codepen.io/jacobgomez1993/pen/MWjZxeG 【参考方案1】：刚刚编辑了关键帧动画
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" >
<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" >
<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【讨论】：
以上是关于在动画期间翻转图像的主要内容，如果未能解决你的问题，请参考以下文章