How to create Frame by Frame Animation using CSS and JavaScript ? Last Updated : 28 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report Frame by frame animation is a technique where a set of images are shown, one by one in a particular order, maintaining fixed time interval gaps between two consecutive images, to make an illusion of motion to the eyes. Now, in a more technical way, we can say that frame-by-frame animation is a technique where different frames appear, one after another, maintaining fixed time interval gaps in different frames to make the illusion of movement. We can use the JavaScript setInterval() method to create a frame-by-frame animation. The setInterval() method is used to repeat a particular function at every given time interval, so it can be used in the frame-by-frame animation on the set of frames so that they appear to have fixed time interval gaps in between them. Syntax: setInterval(function, milliseconds); Parameters: function: The function that has to be executed.milliseconds: It indicates the length of the time interval in milliseconds between each frame. Example: HTML <!DOCTYPE html> <html> <head> <style> img { height: 250px; width: 250px; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; border: 3px solid #73AD21; padding: 2px; } </style> </head> <body> <script> var images = new Array() images = [ "https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG", "https://media.geeksforgeeks.org/wp-content/uploads/20210721215014/frame2-200x190.PNG", "https://media.geeksforgeeks.org/wp-content/uploads/20210721215021/frame3-200x182.PNG" ]; setInterval("Animate()", 400); var x = 0; function Animate() { document.getElementById("img").src = images[x] x++; if (images.length == x) { x = 0; } } </script> <div class="center"> <img id="img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG"> <h3>Frame by Frame Animation</h3> </div> </body> </html> Output: Animation of frames Comment More infoAdvertise with us Next Article How to create Incoming Call Animation Effect using CSS ? B bhawnaatrish Follow Improve Article Tags : JavaScript CSS-Properties JavaScript-Methods CSS-Questions JavaScript-Questions +1 More Similar Reads How to Create Text Animation Effect using JavaScript ? Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a 2 min read How to make Animated Click Effect using HTML CSS and JavaScript ? In this article, we will see how to make an Animated Click Effect using HTML CSS, and JavaScript. We generally see animations on modern websites that are smooth and give users a good experience. Here, we will see when the user clicks on the button only then some animation would appear. The animation 3 min read How to create Incoming Call Animation Effect using CSS ? In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off 2 min read How to create Shooting Star Animation Effect using CSS ? The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e 4 min read Text Typing Animation Effect using HTML CSS and JavaScript To create a text-typing animation effect, we will use a combination of HTML structure, CSS animations, and JavaScript logic to create the typing and deleting text like effect.HTML<!-- index.html --> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <bod 2 min read How to Create Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read Like