css - 为 gif 设置计时器以开始

Question

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

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

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

感谢任何帮助。干杯。

Answer 1

改变<img>的方法通过 javascript 获取源代码非常简单，语法类似于 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();