animation - :hover; force entire animation 上的 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 解决方案。无论如何，我在规范中都没有看到这样做，但也许我在这里错过了一个明显的解决方案？

这里有一个可以玩的 fiddle :http://jsfiddle.net/dwick/vFtfF/

Answer 1

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

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

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

http://jsfiddle.net/u7vXT/