1

我正在尝试为背景图像设置动画，以便当您将链接无限悬停时（只要您将鼠标悬停在链接上）将在 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; }
}
4

2 回答 2

5

首先，您的动画非常慢，只有 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;
    }
}
于 2013-11-11T21:53:36.033 回答
4

您需要@-webkit-keyframes animate动画在-webkit浏览器中工作。

注意，我没有添加任何其他供应商，所以它只适用于-webkit浏览器。

如果您希望动画在将鼠标悬停在链接上时持续存在，则不需要 JS/jQuery （示例）。但是，如果您希望动画在将鼠标悬停在链接上时开始，然后无限播放，这里是基于 jQuery 的解决方案：jsFiddle 示例

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;
    }
}
于 2013-11-11T21:53:06.123 回答