设置一个gif的计时器开始

我有一个.gif动画，从屏幕左侧开始到右侧几百个像素。动画持续5秒，并且我已经设置了它，因此它不会返回到它的初始位置。设置一个gif的计时器开始

我想要的是一旦CSS动画完成后.gif开始。我意识到有些论坛为鼠标悬停效果提供代码，以便它从动画的.jpg源文件更改为.gif文件。但是我找不到任何给你一个计时器而不是鼠标悬停的东西。

自从我在网站上工作已经有几年了，我已经忘了这么多，所以这是一场艰苦的斗争。

任何帮助表示赞赏。干杯。

来源

2017-02-11 Ko24be

通过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();

来源

2017-02-11 11:55:55

它似乎并不奏效。我很确定自己的一切都正确，但不确定我想添加在“某些动画”中。谢谢！ – Ko24be

Nvm，我所做的一切都是错误的，只是将

设置一个gif的计时器开始

回答

相关问题