Обратный transition-эффект при ховере до тех пор, пока анимация не закончится

var stopanimation = false; 
 
$('div').mouseover(function() { 
    
  if (!stopanimation) {//если анимация не выключена 
 
    $(this).toggleClass('hover') 
    stopanimation = true;//выключаем 
 
    setTimeout(function() { 
      stopanimation = false;//включаем после завершения анимации. 
    }, 2000) 
 
  } 
 
})

div { 
  width: 200px; 
  height: 200px; 
  background: blue; 
  transition: all 2s; 
} 
div.hover { 
  transform: translateX(200px); 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div></div>

var el = $('.box'), 
  isAnimating = false; 
 
el.hover(function() { 
  animate(); 
}); 
 
 
function animate() { 
  if (isAnimating) { 
    return false; 
  } 
 
  isAnimating = true; 
 
  el.addClass('active').on('animationend', function() { 
    el.off('animationend'); 
    onEndAnimation(); 
  }); 
} 
 
function onEndAnimation() { 
  isAnimating = false; 
}

.box { 
  position: absolute; 
  left: 0; 
  width: 100px; 
  height: 100px; 
  background: #d32d36; 
} 
.box.active { 
  animation: moveToLeft 3.0s linear both; 
} 
@keyframes moveToLeft { 
  from { 
    left: 0; 
  } 
  to { 
    left: 150px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box"></div>