动画 GiF [关闭]答案

【问题标题】：Animating a GiF [closed]动画 GiF [关闭]
【发布时间】：2021-05-13 17:23:58
【问题描述】：

我仍然是 Web 开发的初学者，我创建一个网站只是为了练习不同的东西。我目前插入了刺猬索尼克的 GIF，我希望他在网页上运行，从左到右非常简单。我尝试使用关键帧实现一些动画并且没有任何运气。我哪里错了？？

    #sonic-gif {position: relative; animation-name: running; animation-duration:4s;}
      }
     #sonicgif {position: relative; animation-name: running; animation-duration:4s;}
    @keyframes running {
         0% {
           left: 0px;
         }
         50% {
           left: 50px;
         }
         100% {
           left: 0px;
         }
       }

    <div id = "sonic-gif" >
       
       <img id = "sonicgif" src ="https://i.postimg.cc/pVmySTLY/sonic-sonic-running.gif" alt = "gif of sonic running">
       </div>**

【问题讨论】：

codepen.io/jacobgomez1993/pen/MWjZxeG
这是实际的网站
您发布的代码可以正常工作并执行您上面描述的操作。但 Sonic 仅运行 50px，因为这是 left 属性中的最高长度值。目前还不清楚问题是什么。
所以他真的跑过屏幕？他不在我的浏览器上，在我尝试过的所有浏览器中，他只是在原地运行。像一个jamook
在我的浏览器上，他向右跑了一小段，然后回到左侧并停留在那里。如果图像在您的连接上加载需要一点时间，则可能在实际显示图像时动画已经完成，在这种情况下，它看起来就像他只是在原地运行。就像一个jamook。

标签： html css web gif

【解决方案1】：

//有时动画不起作用尝试更改动画名称只是错误

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

<div id = "sonic-gif" >
    <img id = "sonicgif" src ="https://i.postimg.cc/pVmySTLY/sonic-sonic-running.gif" alt = "gif of sonic running">
</div>

【讨论】：