Using non-looping animated gif as background

Get Started
1

I thought I’d spice up my css button rollover with an animate gif which slides from one state to another. Animate backgrounds are fine, however I don’t want this to loop, just run the animation and stop at the last frame.

What happens is that it runs the single-run animation for the first rollover, but subsequent rollovers show only where the animation stopped at the last frame. At least in chrome, this is what it does.

Is it possible to get it to run the animate from the beginning for each rollover?

I’m using standard Css:


<style>
a{display:block; width:180px; height:30px; background:white url(backgroundimage1.png) no-repeat;}
a:hover{background-image:url(backgroundanimation.gif);}
</style>
2

Another idea… tho it makes your file bigger… maybe not.

since people are only going to see the thing for a while… I mean, they’re hovering right? How long does someone hover something anyway?

Maybe it’s more sensible to have the animation loop and at the end a VERY long repeat of the last frame? If it’s like 10 seconds before it repeats, nobody would really know the difference.

3

What you might be getting is a run-once-per-load, and the image gets loaded once (when hovering on a background, if you are calling that image with :hover, the image isn’t requested until you’ve hovered).

Other than using JS to make more calls to the server and reload that image, I don’t really know a solution.

4

Thought it was something like that. In that case I’ll probably try a javascript-based solution.

5

I think I see where you’re going, but the end result is still that, the next time someone hovers over something, I’m not able to make the animation start from the beginning. So they hover over the first button for a second, during which it does the required animation. Then they hover over the second button - the background changes to the gif but it’s still 1 sec into the loop.

It’s a shame if there’s no css way to do it, because I think it would be a nice effect (though I’m having trouble with my animation timing). But it’d be pretty easy to do with javascript.