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>