css3动画:徘徊;迫使整个动画

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;
}

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?

动画效果很好，但是当您从元素中移除游标时，它会突然停止。无论如何，即使鼠标已经退出，还是要强制它继续设定的迭代次数吗?基本上，我在这里寻找的是一个由“悬浮状态”触发的动画。我不是在寻找一个javascript解决方案。我没见过在规范中这么做，但是可能有一个明显的解决方案，我没注意到?

Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/

这里有一个可以玩的小提琴:http://jsfiddle.net/dwick/vFtfF/。

4 个解决方案

#1

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.

我担心解决这个问题的唯一方法是使用一些javascript，您必须添加动画作为一个类，然后在动画结束时删除它。

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

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

http://jsfiddle.net/u7vXT/

#2

A simple trick will do the job :

一个简单的技巧就可以做到:

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

Set the 'delay' with an high value on the element (not :hover).

将“延迟”设置为元素的高值(不是:鼠标悬停)。

From: * - Robert McKee

来自:* - Robert McKee。

#3

just to improve Duopixel answer, when runnig infinite animitation I have to do:

为了改进Duopixel的答案，当runnig无限动画的时候，我要做的是:

$(".box").css("animation-iteration-count", "1"); 
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(".box").css("animation-iteration-count", "infinite"); 
  $(this).addClass("animated");        
})

This just not abruptly end the animation.

这并不是突然结束动画。

#4

CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.

CSS在某些情况下可能会有所帮助，但不是全部，下面的代码将在悬停和悬停后对字母间距进行动画。

h1
{
    -webkit-transition:all 0.3s ease;
}

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}

<body>
    <h1>Hello</h1>
</body>

#1