Как получать координаты движущегося объекта в реальном времени?

Question

[jurma]

Добрый день! Есть элемент который анимируется с помощью css (transform: translateY). Нужно получать его координаты x и y на странице в реальном времени. Пробывал реализовать через getBoundingClientRect() , но он отображает только начальные координаты. Нужно реализовать на чистом JS, без библиотек. Для удобства: пример на jsfiddle

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

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

Answer 1

[Stalker_RED]

window.getComputedStyle(element).transform
https://jsfiddle.net/hp06w4wq/2/

Осталось просуммировать эти координаты с начальными.

Answer 2

[AlexRas]

https://jsfiddle.net/hp06w4wq/4/

Answer 3

[Evgenyx82]

Я делал через это - https://developer.mozilla.org/en-US/docs/Web/API/W...