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

【问题标题】：CSS3 keyframe animation which runs on hover悬停时运行的 CSS3 关键帧动画
【发布时间】：2015-04-05 09:10:40
【问题描述】：

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

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

在我的第一个示例中，我在 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;
  }
}

【问题讨论】：

您想要与按钮 1 完全相同的结果吗？
您是否为@keyframes（如@-webkit-keyframes）添加了所有必需的浏览器前缀版本？添加它使我成为work。
@NaeemShaikh 不完全相同。正如我在帖子中所写（以及在关键帧中所见），我希望 BG 移动到 93%，然后回到 91%。与按钮一相似但又不同。
它适用于 Chromium 浏览器，我认为 @Harry 是对的
虽然我还没有投票结束。这可能是 stackoverflow.com/questions/25110510/… 的副本

标签： css css-animations keyframe

【解决方案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;
  }
}

【讨论】：

【解决方案2】：

您还需要为关键帧添加前缀：

DEMO

@-webkit-keyframes nextarrow{ keyframe definition here}
@-moz-keyframes nextarrow{ keyframe definition here}
@-o-keyframes nextarrow{ keyframe definition here}
@keyframes nextarrow{ keyframe definition here}

例如

.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{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

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

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">

【讨论】：