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

您需要@-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;
    }
}

Answer 2

首先,你的动画在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;
    }
}