Question

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

当用户在按钮上悬停时，我希望背景图像稍微向右移动，然后再向后移动。所以有点反弹＆＃34;运动。

在我的第一个例子中，我在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!

＆＃13;

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

＆＃13;

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

＆＃13;

注意： 您可以将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;
  }
}

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

例如

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: