CSS3 动画 - 无限悬停箭头

CSS3 Animation - Infinite Hover Arrow

本文关键字：悬停 无限 动画 CSS3      更新时间：2023-09-26

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

首先，你的动画非常慢，只有 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;
    }
}

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

请注意，我没有添加任何其他供应商，因此它只能在-webkit浏览器中使用。

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

j查询：

$('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;
    }
}
相关文章：