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>