Photo by Florian Olivo on Unsplash<!DOCTYPE html>
<html>
<head>
<style>
.container {width: 400px;height: 400px;position: relative;background-color: yellow;margin: auto;margin-top: 100px;}.animate {width: 50px;height: 50px;background-color: red;position: absolute;}.animate2 {width: 50px;height: 50px;background-color: red;top: 0;right: 0;position: absolute;}button {position: relative;top: 20px;margin-left: 700px;}</style></head><body><!-- <h1 id="demo"></h1> --><div class=container><div class="animate"></div><div class="animate2"></div></div><button onclick="call()">Button</button><script>function call(){const animate = document.querySelector('.animate')const animate2 = document.querySelector('.animate2')var pos=0;var timeInterval=setInterval(function(){pos++;if(pos==350){clearInterval(timeInterval)
}animate.style.top=`${pos}px`;animate.style.left=`${pos}px`;animate2.style.top=`${pos}px`;animate2.style.right=`${pos}px`;},5)}</script></body></html>
