Animation using JavaScript

JavaScript animations can handle things that CSS can’t. For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.An animation can be implemented as a sequence of frames – usually small changes to HTML/CSS properties.

The idea behind Javascript-based animation is fairly simple; a number of DOM elements (<img />, <div> or otherwise) are moved around the page according to some sort of pattern determined by a logical equation or function.


<!DOCTYPE html>
#myContainer {
    width: 400px;
    height: 400px;
    position: relative;
    background: black;
#myAnimation {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #FF4B4B;
    border-radius: 50px;
   <button onclick="myMove()">Click Me</button> 
  <div id ="myContainer">
    <div id ="myAnimation"></div>
function myMove() {
   var elem = document.getElementById("myAnimation"); 
   var pos = 0;
   var id = setInterval(frame, 10);
   function frame() {
     if (pos == 350) {
      } else {
        pos++; = pos + 'px'; = pos + 'px'; 
        document.getElementById("myAnimation").style["boxShadow"] = "10px 30px 30px 5px white";


Leave a Reply

Your email address will not be published. Required fields are marked *