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解决方案.我还没有看到在规范中做到这一点,但也许有一个明显的解决方案,我错过了这里？

这是一个小提琴: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/

Answer 2

如果有人想使用它，我使用纯 Javascript从同一篇文章/sf/answers/538845051/创建了一个JsFiddle 。

const elements = document.getElementsByClassName('box');

for (let i = 0; i <= elements.length; i++) {
  elements[i].addEventListener('animationend', function(e) {
    elements[i].classList.remove('animated');
  });

 elements[i].addEventListener('mouseover', function(e) {
   elements[i].classList.add('animated')
 })
}