Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to animate GIFs in HTML document?

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?

like image 255
MaryBaker Avatar asked Jul 11 '16 14:07

MaryBaker


People also ask

How do you make an animated GIF in HTML?

It is in GIF format i.e. Graphics Interchange Format file. We need to use the <image> tag with the src attribute to add an animated image in HTML. The src attribute adds the URL of the image (file destination). Also, we can set the height and width of the image using the height and width attribute.

How do I make GIFs play once in HTML?

Go to the Window tab and select timeline(if the timeline is not already open). At the bottom of the timeline panel, you will find an option, which says "Forever". Change that to "Once". Go to File> Export> Export for Web and save it as a gif.

How do you animate GIFs?

Go to GIPHY's site and select the “CREATE” button in their header. For the animated GIF, select Slideshow. Organize them in the order that you want them to animate. Using the slider tool, select how fast you want the layers to loop.


2 Answers

By default browser always plays animated gifs, and you can't change that behavior. If the 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" />
like image 182
Yuri Tkachenko Avatar answered Sep 29 '22 03:09

Yuri Tkachenko


Agreed with Yuri Tkachenko's answer.

I wanna point this out.

It's a pretty specific scenario. BUT it happens.

When you copy a gif before its loaded fully in some site like google images. it just gives the preview image address of that gif. Which is clearly not a gif.

So, make sure it ends with .gif extension

like image 21
Dummy Avatar answered Sep 29 '22 01:09

Dummy