How to Animate GIFs in HTML Document?

Many individuals use pictures, animated GIFs, and attractive colors to make their websites look more appealing. Thanks to HTML, that offers the “<img>” element to embed images and GIFs to the web page. More specifically, a GIF is a collection of images or a soundless video that automatically plays without a play button. We can animate these gifs in CSS by utilizing the “animation” property.

This write-up will guide about:

• How to Add GIFs in HTML Document?
• How to Animate GIFs in HTML Document?

How to Add GIFs in HTML Document?

Follow the steps to add a GIF to the HTML page:

• Firstly, add a div element and assign it a class name “gif-style”.
• To add a GIF, add an “<img>” element with the “alt” and “src” attributes.
• The “src” holds the URL of the GIF, and the “alt” attribute contains the alternate text, which displays when the image cannot load on the web page:

It can be observed that the GIF has been added to the HTML document successfully:

How to Animate GIFs in HTML?

The GIFs are already animated images, but users can improve them using the CSS properties. For this cause, take a look at the given properties.

Style “body” Element

The CSS “background-color” property is used to adjust the background color across the entire page.

Output

Style “img” Element

The “img” element of the “gif-style” div is set with these properties:

• “width” property determines the width of the GIF.
• “top” generates space for the element from the top.
• “position” sets the element’s position on the page. Its value “absolute” refers to the adjustment of GIF relative to the document’s body.
• “right” property is set to the value “0”, which means no space at the right of the image.
• “animation” is the shorthand property specifying the values for animation name, animation-duration, animation-iteration-count.

Applying @keyframe rules

The animation name “animated-gif” specified in the above code is utilized to set the @keyframe rules for the GIF:

• At 0% of the animation, the GIF is relocated at “300px” on the x-axis.
• At 100% of the animation, the GIF is adjusted at “-600px” on the x-axis.

Output

The output has verified that the GIF has been successfully animated using CSS.

Conclusion

To embed GIFs in HTML documents, the “<img>” element is utilized with the “src” attribute, which holds the URL of the GIF. Although these GIFs are already animated, we can add more animations using the CSS “animation” property. The “@keyframe” rules are then specified to determine the animation behavior. This post has demonstrated how to animate GIFs in HTML documents.