JavaScript से एनिमेशन कैसे बनाएं?

JavaScript से एनिमेशन बनाने के लिए कोड निम्न है -

उदाहरण

<!DOCTYPE html> <html> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: blue;       color:white;       border:none;       margin-bottom:10px;    }    .Animation {       width: 60px;       height: 60px;       position: absolute;       background-color: rgb(134, 25, 207);    } </style> <body> <h1>Animation using JS example</h1> <button onclick="startAnimation()">Start Animation</button> <div class ="Animation"></div> <script>    function startAnimation() {       var elem = document.querySelector(".Animation");       var pos = 0;       var id = setInterval(frame, 10);       function frame() {          if (pos == 450) {             clearInterval(id);          } else {             pos++;             elem.style.borderRadius = pos/14 + 'px';             elem.style.left = pos + 'px';          }       }    } </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट देगा -

"Start Animation" बटन पर क्लिक करने पर -