当元素快速释放时，Css过渡不完全动画

Question

根据我的理解，这是一个非常直接的过渡，但是当我在Chrome中打开它时，转换不会始终如一。允许转换在单一方向完成并快速改变状态似乎打破了转变。

CSS：

.carousel-controlls{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 2000ms ease;
  -moz-transition: opacity 2000ms ease;
  -o-transition: opacity 2000ms ease;
  transition: opacity 2000ms ease;
}
.carousel-controlls:hover{
  opacity: 1;
}

HTML：

<div class="carousel-controlls">
    <a class="left" href="#carousel" role="button" data-slide="prev">
        <button class="btn"><span class="glyphicon glyphicon-menu-left"></span></button>
    </a>
    <a class="right" href="#carousel" role="button" data-slide="next">
        <button class="btn"><span class="glyphicon glyphicon-menu-right"></button>
    </a>
</div>