function animationFrame_old(n,o){function t(){if(window.requestAnimationFrame(t),e=Date.now(),i=e-a,i>r){var n;a=e-i%r,n=(a-u)/1e3,o(n)}}var e,i,n=n,a=Date.now(),r=1e3/n,u=a;t()}window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(n){window.setTimeout(n,1e3/60)}}();var animationFrame=function(){function n(n,o){function t(){if(u.loop&&(window.requestAnimationFrame(t),e=Date.now(),i=e-a,i>r)){var n,w={};a=e-i%r,n=(a-m)/1e3,w={counter:u.counter+"f",time_el:Math.ceil(n)+"s",fps:Math.ceil(u.counter/n)+" fps"},o(w),++u.counter}}var e,i,n=n,a=Date.now(),r=1e3/n,u=this;this.loop=!0,this.counter=0;var m=a;t()}return n.prototype={stop:function(){console.log(this),this.loop=!1,this.counter=0}},n}(); var dot1 = document.querySelector( 'p.dot.num1' ) , dot2 = document.querySelector( 'p.dot.num2' ) , move = document.querySelector( 'p.dot.move' ) ; var p1 = { x : dot1.getBoundingClientRect().left , y : dot1.getBoundingClientRect().top } , p2 = { x : dot2.getBoundingClientRect().left , y : dot2.getBoundingClientRect().top } ; var speed = 5 , dx = p2.x - p1.x , dy = p2.y - p1.y , distance = Math.sqrt( dx * dx + dy * dy ) , moves = distance / speed , xunits = ( p2.x - p1.x ) / moves , yunits = ( p2.y - p1.y ) / moves , ball = { x : p1.x , y : p1.y } ; function drawScreen () { var loop = new animationFrame( 60 , function () { if ( moves > 1 ) { moves -= 1 ; ball.x += xunits ; ball.y += yunits ; } else { ball = { x : p2.x , y : p2.y } ; loop.stop() ; } move.style.left = ball.x + 'px' ; move.style.top = ball.y + 'px' ; }) ; } setTimeout(function () { drawScreen() ; } , 1000 ) ;
<p class="dot num1"></p> <p class="dot num2"></p> <p class="dot move"></p>
html , body { margin: 0px; padding: 0px; } p.dot { border: 2px solid purple; position: absolute; width: 0px; height: 0px; border-radius: 100%; margin: 0px; } p.dot.num1 { left: 50px; top: 50px; } p.dot.num2 { left: 550px; top: 200px; border-color: indianred; } p.dot.move { border-color: cornflowerblue; }