为 gif 设置计时器以开始

Question

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

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

我在网站上工作已经有几年了，我忘记了很多东西，所以这是一场斗争。

感谢任何帮助。干杯。

Answer 1

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

可以通过多种方式将 GIF 的更改与动画的结尾相匹配，但我会通过同时将动画作为 class 添加到您的元素来实现您在 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();

为 gif 设置计时器以开始

Set timer for a gif to start

css

animation

timer

gif

mouseover