How to create Frame by Frame Animation using CSS and JavaScript ?
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:
<!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:
