Edit in JSFiddle

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; }