CSS3 动画 - 无限悬停箭头

Question

我正在尝试为背景图像设置动画，以便当您将链接无限悬停时（只要您将鼠标悬停在链接上）将在 905% 和 100% 之间来回移动。我创建了一个 JSFiddle 来播放，但它并没有真正过渡到任何动画，而是只是移动了背景。 JSFiddle

CSS

a{display: block; background: url('thin-right-arrow.png') no-repeat right center; widht: 100%:}

a                   {background-position: 90% center;}

a:hover     {background-position: 100% center; -webkit-animation: animatedBackground 40s linear infinite;} 

@keyframes animatedBackground {
    from { background-position: 90% center; }
    to { background-position: 100% center; }
}

Answer 1

首先，您的动画非常慢，只有 40 秒。其次，您需要包含所有供应商前缀版本的关键帧。你只是忘记了-webkit 关键帧。

注意：不需要 jquery/javascript

如果您希望箭头在取消悬停后顺利返回，只需添加 transition 及其供应商前缀好友

编辑：似乎您希望在悬停时来回平滑，而不仅仅是在一个方向上平滑连续。完全相同的概念只是改变了关键帧：

演示：jsFiddle

a {
    background-position: 90% center;

    -webkit-transition: background-position 0.3s linear;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: background-position 0.3s linear;  /* Firefox 4-15 */
    -o-transition: background-position 0.3s linear;  /* Opera 10.50–12.00 */
    transition: background-position 0.3s linear;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

a:hover {
    background-position: 100% center;

    -moz-animation: animatedBackground 2s infinite linear;
    -o-animation: animatedBackground 2s infinite linear;
    -webkit-animation: animatedBackground 2s infinite linear;
    animation: animatedBackground 2s infinite linear;
}

@-moz-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-webkit-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-o-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@-ms-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}
@keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 90% center;
    }
}

这是连续（向右）箭头版本：

演示：jsFiddle

a {
    background-position: 90% center;

    -webkit-transition: background-position 0.3s linear;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: background-position 0.3s linear;  /* Firefox 4-15 */
    -o-transition: background-position 0.3s linear;  /* Opera 10.50–12.00 */
    transition: background-position 0.3s linear;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

a:hover {
    background-position: 100% center;

    -moz-animation: animatedBackground 2s infinite linear;
    -o-animation: animatedBackground 2s infinite linear;
    -webkit-animation: animatedBackground 2s infinite linear;
    animation: animatedBackground 2s infinite linear;
}

@-moz-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-webkit-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-o-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@-ms-keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}
@keyframes animatedBackground {
    0% {
        background-position: 90% center;
    }
    100% {
        background-position: 100% center;
    }
}

Answer 2

您需要 @-webkit-keyframes animate 才能使动画在 -webkit 浏览器中运行。

_{注意，我没有添加任何其他供应商，所以它仅在-webkit浏览器中工作。}

如果您希望动画在 悬停在链接 (example) 上时持续播放，则不需要 JS/jQuery。但是，如果您希望动画从悬停在链接上开始，然后无限播放，这里是基于 jQuery 的解决方案：jsFiddle example

jQuery:

$('a').hover(function(){
    $(this).addClass('animate');
});

CSS：

.animate {
    background-position: 90% center;
    -webkit-animation: animate 4s infinite;
}
@-webkit-keyframes animate {
    50% {
        background-position: 100% center;
    }
}