css3 动画:悬停；强制整个动画 [英] 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/

Here's a fiddle to play with: 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 动画:悬停；强制整个动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！