JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="box"></div>
Delta is zero on subsequent calls in the same tick (which shouldn't occur).
<li id="log"></li>

CSS

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

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

JavaScript

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

$a.animate( { top: "100%" }, { duration: T, easing: "linear", progress: function( anim, percent ) {
	// Remember the time of this tick
  now = jQuery.now();
  
  // Add a secondary unqueued animation, which will get double-processed in its first tick
	if ( last === undefined && percent > 0 ) {
  	last = 0;
  	$a.animate( { opacity: 0.2 }, { queue: false, duration: T, easing: "linear", progress: log } );
  }
} } );

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