JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="box"></div>
<li id="log"></li>

CSS

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 53px;
  left: 53px;
  margin-top: -51px;
  margin-left: -51px;
  
  opacity: 0.2;
  background: blue;
}

#log {
  list-style-type: none;
}
#log > li::before {
  content: "Δ "
}

JavaScript

var now,
	T = 1500,
  last = 0,
	$a = jQuery("#a"),
	$log = jQuery("#log");

jQuery.Animation( $a[0], {}, { duration: T, easing: "linear", progress: log } );

function log() {
  now = jQuery.now();
	$log.append( "<li>" + (now - last) + "</li>" );
  last = now;
}