CODEWITHSUNDEEP
cssanimationtimermouseovergif
Ko24be
Ko24be

Reputation: 3

Set timer for a gif to start

I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.

What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.

It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.

Any help is appreciated. Cheers.

Upvotes: 0

Views: 1948

Answers (1)

Dylan Stark
Dylan Stark

Reputation: 2395

The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".

Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your 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();

Upvotes: 1

Related Questions