How To Animate Multiple Images Using CSS?

In today’s article, we will learn how to animate multiple images using HTML CSS, and javascript let me show you the animation that we will have at the end of this article, I have learned this from the Udemy course do check that course, If you are just looking for the code then copiable code is provided at the end of the blog.

css

HTML :

Let’s create one div with class name images which will have multiple img tags with the src of images because we are gonna need multiple images to create an animation now let’s go for the CSS.

CSS :

First, we center our images using flex property to the body. Then we will give the absolute position to our img tag which will make our images overlap with each other.

As we can see the pictures are still not in the center so to put them in the center we will use the transform property to put our pictures in the center with the scale of zero after which all images will disappear.

Now we’ll add a change class to our first img child which will also have the transform property but the scale will be one which means that the first image will be visible,

now let’s discuss the reason why we are adding a change class to the first child, we would be able to delete and add the class using javascript which will make our animation possible now let’s go for the javascript to make this animation possible.

JAVASCRIPT :

We will create a variable named images which will have all the queries named img and another variable i for the iteration through all the img tags,

To make an infinite loop we will use setInterval in which there will be a variable that has the query that has .change class in it which is our first img child, now to animate we will remove that class from img,

Now what we want is to constantly remove the change class from the current img and add it to its next sibling,
we also have to take care of the I that if the value of I becomes greater than the length of variable images then we have to set it to 1 and add a change class to that element.

Note: we can even create a CSS text animation as well.

here we have finished the project I hope you got all the info that is given in the article if you have any queries do comment I will answer, Thank you.

<!DOCTYPE html> <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animation</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {         display: flex;         align-items: center;         justify-content: center;         width: 100%;         height: 100vh;         background-color: white;       }
      .images img {         position: absolute;         transform: translate(-50%, -50%) scale(0);       }
      .images img.change {         transform: translate(-50%, -50%) scale(1);       }     </style>   </head>   <body>     <div>       <img src="animation/anime-1.png" />       <img src="animation/anime-2.png" />       <img src="animation/anime-3.png" />       <img src="animation/anime-4.png" />       <img src="animation/anime-5.png" />       <img src="animation/anime-6.png" />       <img src="animation/anime-7.png" />       <img src="animation/anime-8.png" />     </div>     <script>       const images = document.querySelectorAll(".images img");       let i = 1;
      setInterval(() => {         i++;         const img = document.querySelector(".images .change");         img.classList.remove("change");         if (i > images.length) {           images[0].classList.add("change");           i = 1;         } else {           img.nextElementSibling.classList.add("change");         }       }, 180);     </script>   </body> </html>

7 thoughts on “How To Animate Multiple Images Using CSS?”

  1. Hey There. I discovered your weblog the usage of
    msn. This is an extremely well written article. I will make sure to bookmark
    it and return to read more of your helpful information. Thanks for the post.
    I’ll certainly return.

  2. I know this if off topic but I’m looking into
    starting my own blog and was wondering what all is required
    to get set up? I’m assuming having a blog like yours would
    cost a pretty penny? I’m not very internet savvy so I’m not 100% certain. Any tips or
    advice would be greatly appreciated. Cheers

    1. yeah can get a domain and a host at a very cheap price you just have to look for it and there is WordPress for handling the website all the way from the head to the foot of the website

  3. Someone I used to know told me that “Make sure that if you are going to be traveling out of the country on your honeymoon, to have all of your documents intact, including your passport. This is a stress that you will not need right after your wedding and could put a damper on your honeymoon if something is lost.”.
    Makes me chortle when I remember it now

  4. Hi to every body, it’s my first go to see of this blog; this weblog
    consists of amazing and in fact excellent data in support of readers.

Leave a Comment

Your email address will not be published.

Scroll to Top