css3动画on：hover;强制整个动画 [英] css3 animation on :hover; force entire animation

问题描述

我创建了一个简单的反弹动画，它适用于元素的：hover 状态：

I've created a simple bounce animation which i'm applying to the :hover state of an element:

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

The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hover state. I'm not looking for a javascript solution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?

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

推荐答案

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

I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.

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

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

http：/ / jsfiddle.net/u7vXT/

这篇关于css3动画on：hover;强制整个动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！