How can I temporarily disable an element's CSS hover-triggered animation?

Consider this slider:

$(function() {
  var $volumeBar = $('#Volume-Bar');
  var $volumeContainer = $('#Volume-Container');
  var $value = $('.value');

  $volumeContainer.on('mousedown', function(event) {
    var height = $volumeContainer.height();
    var top = $volumeContainer.position().top;
    var startingCoord = event.clientY - top;
    var currentCoord;
    var percent;
    var difference;
    seekingVol = true;
    $volumeBar.css({
      'background-color': '#dcb311',
    });
    $volumeContainer.on('mouseup mouseleave', function() {
      if (seekingVol) {
        seekingVol = false;
        $volumeBar.css({
          'background-color': '',
        });
      }
    });
    $volumeContainer.on('mousemove', function(event) {
      if (seekingVol) {
        currentCoord = event.clientY - top;
        percent = ((height - currentCoord) / height) * 100;
        $volumeBar.finish();
        $volumeBar.css({
          'height': percent + '%'
        });
      }
    });
  });
});

@import url(https://fonts.googleapis.com/css?family=Bitter:700);
#Volume-Container {
  position: relative;
  width: 75px;
  height: 150px;
  background-color: #0e2030;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#Volume-Bar {
  position: absolute;
  bottom: 0px;
  height: 30%;
  width: 100%;
  background-color: #6ab2f2;
  transform-origin: bottom;
}

#Volume-Bar:hover {
  background-color: #dcb311;
  animation: Vert-Bounce 0.6s;
}

@keyframes Vert-Bounce {
  0% {
    transform: height(1);
  }
  25% {
    transform: scaleY(1.3);
  }
  50% {
    transform: scaleY(1);
  }
  75% {
    transform: scaleY(1.15);
  }
  100% {
    transform: scaleY(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Volume-Container">
  <div id="Volume-Bar"></div>
</div>

Notice the bounce animation on the bar on hover?

When the user pulls the bar upward, the mouse exits the element due to the lag between the bar's scaling and the movement of the mouse. When the element catches up to the mouse or the user pulls back downward, another hover event is fired as the mouse re-enters the element. This triggers the bounce animation multiple times as the user drags the bar. I want to disable this animation on mousedown and re-activate it on mouseup.

How can I do this?