<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Java Script</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button class="btn">Animation</button>
    <div class="wrapper">
        <div class="box"></div>
    </div>

  <script src="script.js"></script>
  </body>
</html>
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .wrapper {
    position: relative;
    width: 400px;
    height: 400px;
    border: 3px solid red;
  }
  button {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100px;
    height: 40px;
    background-color: yellow;
    border: none;
  }
 
const btn = document.querySelector(".btn");


function myAnimation () {
    const elem = document.querySelector(".box");
    let pos = 0;


const id = setInterval(frame, 10);
function frame () {
    if (pos === 300) {
        clearInterval(id);
    } else {
        pos++;
        elem.style.top = pos + "px";
        elem.style.left = pos + "px;";
    }
}
}

btn.addEventListener("click", myAnimation);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.