How to animate GIFs in HTML document?

html gif animated-gif
MaryBaker picture MaryBaker · Jul 11, 2016 · Viewed 93.8k times · Source

I have the following <img> tag in a static HTML document.

<img src="foo.gif" alt="This is an animated gif image, but it does not move"/>

After I set its src attribute to point to a .gif file (i.e. foo.gif), the GIF appears as a static (or non-moving) image. How do I animate the GIF?

Answer

Yuri Tkachenko picture Yuri Tkachenko · Jul 11, 2016

By default browser always plays animated gifs, and you can't change that behaviour. If gif image does not animate there can be 2 ways to look: something wrong with the browser, something wrong with the image. Then to exclude the first variant just check trusted image in your browser (run snippet below, this gif definitely animated and works in all browsers).

Your code looks OK. Can you check if this snippet is animated for you?
If YES, then something is bad with your gif, if NO something is wrong with your browser.

<img src="http://i.stack.imgur.com/SBv4T.gif" alt="this slowpoke moves"  width=250/>

Related questions

Animated GIF in HTML5 canvas

In HTML5, how can I draw easily (no too much complex code please) an animated GIF in a canvas that works (with drawImage only first frame is shown in the canvas)

Read More
Do <img> tags in html support animated gifs?

I am making a photo upload site, and began to wonder: Do <img> tags in html support animated gifs, and can they actually show animated gifs in their image? Also, if <img> tags don't support animated …

Read More
How can I embed the new GIFV format on my webpage?

Normally I would embed a gif like so. <img src="http://i.imgur.com/awHPuBp.gifv"> Although I get an error that the image could not be loaded. I'm just wondering what mark up I will need to …

Read More