Animate

HTML

<div class="container">
  <div class="rec animate"></div>
  <div class="coord"></div>
</div>

CSS

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.rec {
  position: absolute;
  left: 220px;
  top: 260px;
  width: 70px;
  height: 30px;
  background-color: red;
}

.animate {
  animation-name: moveup;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
}

@keyframes moveup{
  0% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(-250px);
  }
  
}

JavaScript

var rec = document.querySelector('.rec'),
		coord = document.querySelector('.coord');

setInterval(function() {
	coord.innerHTML = rec.getBoundingClientRect().top.toFixed(0);
}, 10);