动画 GiF [关闭]

Posted 2023-03-25

【中文标题】动画 GiF [关闭]

【英文标题】：Animating a GiF [closed]

【发布时间】：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。

【参考方案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>