设置启动 gif 的计时器答案

【问题标题】：Set timer for a gif to start设置启动 gif 的计时器
【发布时间】：2017-06-29 18:01:40
【问题描述】：

我有一个 .gif 动画，从屏幕左侧开始到右侧几百像素。动画持续 5 秒，我已将其设置为不会返回到初始位置。

我想要的是在 CSS 动画完成后启动 .gif。我意识到一些论坛提供了鼠标悬停效果的代码，以便它从动画的 .jpg 源更改为 .gif。但是我找不到任何可以为您提供计时器而不是鼠标悬停的东西。

自从我从事网站工作以来已经有几年了，我已经忘记了很多东西，所以这一直是一场斗争。

感谢任何帮助。干杯。

【问题讨论】：

标签： css animation timer mouseover gif

【解决方案1】：

通过 javascript 更改 <img> 源的方法相当简单，语法类似于 img.src = "new/source.gif"。

可以通过多种方式实现对 GIF 的更改与动画的结束相匹配，但我会通过在设置超时的同时将动画作为一个类添加到您的元素来做到这一点你的javascript。

HTML

<img id="image" src="path/to/static.jpg">

JAVASCRIPT

var img = document.getElementById("image");

function photoSwitch(){

    // begin your CSS animation by applying class
    img.setAttribute("class", "some-animation");

    // have javascript wait 5s before switching the image source
    setTimeout(function(){
        img.src = "path/to/moving.gif";
    },5000);
}

photoSwitch();

【讨论】：

它似乎不起作用。我很确定我做对了一切，但不确定我应该在“一些动画”中添加什么。谢谢！
Nvm，我做错的只是将
@Ko24be 很高兴这对您有所帮助！如果此答案对您有用，您可以使用投票箭头下方的复选标记将其标记为已接受。