End CSS transition early

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>
  Animation took: <span class="result"></span>
</p>
<p>
  timeout: <span class="result2"></span>
</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'),
		result1El = document.querySelector('.result'),
    result2El = document.querySelector('.result2');

animateEl.addEventListener('transitionstart', function(e){
	
	window.animationStartTime = performance.now();
  result1El.innerHTML = '';
  result2El.innerHTML = '';
})
animateEl.addEventListener('transitionend', function(e){
  result1El.innerHTML = Math.round(performance.now()-window.animationStartTime) +'ms';
});
animateEl.addEventListener('mouseenter', function(e){
	animateEl.setAttribute('style', '');
  setTimeout(function(){
  	animateEl.setAttribute('style', 'transition:none;'); //transition-duration:1ms !important;
  	result2El.innerHTML = Math.round(performance.now()-window.animationStartTime) +'ms';
  }, 1000);
});