Animasi JavaScript dilakukan oleh pemrograman perubahan bertahap dalam gaya elemen.
Perubahan tersebut disebut dengan timer. Ketika interval waktu kecil, animasi terlihat terus menerus.
Klik tombol berikut untuk melihat demo code diatas.
Sumber: w3schools
Perubahan tersebut disebut dengan timer. Ketika interval waktu kecil, animasi terlihat terus menerus.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<div id ="container">
<div id ="animate"></div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
Sumber: w3schools
