我正在尝试制作一个小的关键帧动画。
当用户将鼠标悬停在按钮上时,我希望背景图像稍微向右移动,然后再返回。所以有点“反弹”运动。
在我的第一个示例中,我在 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;
}
}
最佳答案
替代@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;
}
}
关于悬停时运行的 CSS3 关键帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28345222/