css3动画：hover;强制整个动画

我创建了一个简单的反弹动画，我正在应用于：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;
}

动画效果很好，除了当您将光标从元素中删除后，它会突然停止。有没有强制它继续设定的迭代次数即使鼠标已经退出？基本上我在这里寻找的是由：悬停状态触发的动画。我不是在寻找一个javascript解决方案。我没有看到这样做的规格，但也许有一个明显的解决方案，我错过了这里？

这是一个小提琴玩：http://jsfiddle.net/dwick/vFtfF/

解决方法

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

$(".Box").bind("webkitAnimationEnd mozAnimationEnd animationEnd",function(){
  $(this).removeClass("animated")  
})

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

http://jsfiddle.net/u7vXT/

原文地址：https://www.jb51.cc/css/218778.html