End CSS transition early

by Slava

HTML

<div class="parent">
  <div class="animate">
    We want to launch the animation for the duration of 2000ms, but prematurely end it for example after 1000ms. So it doesn't reach red zone.
  </div>
</div>
<p class="result"></p>

CSS

.parent{
  height:300px;
  box-shadow:0 -100px 0 0 rgb(255,150,150) inset, 0 -200px 0 0 rgb(150,255,150) inset;
}
.animate{
  height:100px;
  background-color:rgba(0,100,200,0.6);
  transition:height 2000ms cubic-bezier(0.645,0.045,0.355,1);
}
.animate:hover{
  height:300px;
}

JavaScript

var animateEl = document.querySelector('.animate'),
		resultEl = document.querySelector('.result');

animateEl.addEventListener('transitionstart', function(e){
	window.animationStartTime = performance.now();
  resultEl.innerHTML = '';
})
animateEl.addEventListener('transitionend', function(e){
  resultEl.innerHTML = 'Animation took: '+ Math.round(performance.now()-window.animationStartTime) +'ms';
});