DOM ANIMATION — HTML

<!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>

--

--

Want to work as Freelancer, check this out : https://www.topcoder.com/gigs?referralId=84qq8h

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store