Есть простая анимация на JS, но она движется только по вертикали. Надо сделать так, чтобы она двигалась сперва вниз (как в коде), потом направо, вверх и вернулась в исходное положение.
let btn = document.querySelector('button'),
box = document.getElementById('box');
function myAnimation() {
let pos = 0;
let iq = setInterval(frame, 10);
function frame() {
if (pos == 250) {
clearInterval(iq);
} else {
pos++;
box.style.top = pos + 'px';
}
}
}
btn.addEventListener('click', myAnimation);
.wrapper {
width: 300px;
height: 300px;
border: 3px solid #000;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: green;
position: absolute;
}
button {
margin-top: 30px;
}
<div class="wrapper">
<div id="box">
</div>
<!-- /#box -->
</div>
<!-- /.wrapper -->
<button>Click Me</button>