悬停时运行的 CSS3 关键帧动画

Question

我正在尝试制作一个小的关键帧动画。

当用户将鼠标悬停在按钮上时，我希望背景图像稍微向右移动，然后再返回。所以有点“反弹”运动。

在我的第一个示例中，我在 CSS 中使用了一个简单的悬停，将背景位置从 91% 更改为 93%，从而在悬停时产生移动。

然而，当我尝试做类似的事情时，使用名为 nextarrow 的关键帧动画，动画不会运行。

这是一个 JSFiddle，显示了我的工作示例( button-one )和我的非工作示例( button-two )

我哪里错了？

http://jsfiddle.net/franhaselden/Lfmegdn5/

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

Answer 1

替代@jbutler483 的答案使用 Prefix free: Break free from CSS vendor prefix hell!

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">

注意: 你可以结合 0% 和 100% 因为它们是相同的:

从

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

至

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

或为此

@keyframes nextarrow {
  from,to {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}