：hover;上的css3动画；强制整个动画

Question

我创建了一个简单的弹跳动画，该动画将应用于:hover元素的状态：

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}

.box:hover { 
    animation: bounce 1s;
}

动画效果很好，但是当您从元素中删除光标时，动画会突然停止。无论如何，是否有强迫它继续设置的迭代次数（即使鼠标已经退出）？基本上，我在这里寻找的是由:hover状态触发的动画。我不是 在寻找 JavaScript解决方案。无论如何，我还没有看到在规范中执行此操作，但是也许我错过了一个明显的解决方案？

Answer 1

恐怕解决此问题的唯一方法是使用一些JavaScript，您必须将动画添加为类，然后在动画结束时将其删除。

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})