鼠标悬停后将CSS动画从当前位置反转到新位置

pn9klfpd 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(186)

我想有一个侧边栏，当鼠标悬停在它上面时，通过改变渐变的背景位置来改变颜色，但我也想在鼠标离开悬停后反转动画。但我目前代码的问题是，当我删除悬停时，它从结束到开始做动画，而不是从它在当前位置的地方到我想让它去的地方。下面是动画的代码片段：

.side-nav{

    background: linear-gradient(#00bcd4, #e91e63, #3f51b5, #00bcd4);
    background-size: 100% 500%;
    background-position: 0 40%;
    animation: out 2s linear reverse;
}
@keyframes out {
    from{background-position: 0 400%;}
    to{background-position: 0 40%;}
}
.side-nav:hover{
    animation: backcolor 20s linear infinite reverse;
}
@keyframes backcolor {
    from{background-position: 0 40%;}
    to{background-position: 0 400%;}
}

例如，如果我将鼠标悬停在侧菜单上并开始播放动画，但在动画完成之前移除鼠标，我希望动画从到达的位置开始反转。

css

来源：https://stackoverflow.com/questions/75565356/reversing-a-css-animation-from-current-postion-to-a-new-one-after-leaving-hover

1条答案

按热度按时间

ru9i0ody1#

要达到预期效果，需要使用animation-play-state属性。当鼠标离开悬停位置时，应该暂停当前动画，并从当前位置开始反向播放一个新动画。下面是一个更新后的代码片段，应该可以正常工作：

.side-nav{
    background: linear-gradient(#00bcd4, #e91e63, #3f51b5, #00bcd4);
    background-size: 100% 500%;
    background-position: 0 40%;
    animation: out 2s linear reverse;
    animation-fill-mode: forwards; /* stay at the final position of the animation */
    animation-play-state: paused; /* pause the animation */
}
@keyframes out {
    from {background-position: 0 400%;}
    to {background-position: 0 40%;}
}
.side-nav:hover{
    animation: backcolor 20s linear infinite reverse;
    animation-play-state: running; /* resume the animation */
}
@keyframes backcolor {
    from {background-position: 0 40%;}
    to {background-position: 0 400%;}
}

通过设置动画填充模式：前进，则元素在动画结束时将停留在动画的最终位置，而不是恢复到初始状态。
通过设置动画播放状态：最初暂停，动画被暂停直到悬停事件触发。
最后，通过设置animation-play-state：在悬停时运行，将恢复暂停的动画，动画将从当前位置反向播放。

赞(0）回复(0）举报 2023-02-26

我来回答

鼠标悬停后将CSS动画从当前位置反转到新位置

1条答案

相关问题

热门标签

最新问答