在鼠标悬停时继续CSS3关键帧动画/在鼠标悬停时停止重复播放

Question

在鼠标悬停时继续CSS3关键帧动画/在鼠标悬停时停止重复播放

javascriptcssanimationhovercss-animations

4

我已经设置了CSS3动画，只想在悬停时更改box-shadow的颜色。但是，当我这样做时，动画会突然重置。有没有办法在悬停时继续无缝动画而不跳跃？如果需要使用javascript或jquery，那也可以，但我更喜欢有CSS3解决方案。感谢任何帮助。

table {
    max-width:1000px!important;
    padding:15px;
    word-wrap:
    break-word;
    background-color:#ffffff;
    border: 7px solid #454ce9;
    animation: glowing 5000ms infinite;
}

table:hover {
    animation: glowing2 5000ms infinite;
}


@keyframes glowing {
    0% { box-shadow: 0 0 -10px #e9458a; }
    40% { box-shadow: 0 0 20px #e9458a; }
    60% { box-shadow: 0 0 20px #e9458a;}
    100% { box-shadow: 0 0 -10px #e9458a;}
}

@-webkit-keyframes glowing {
    0% { box-shadow: 0 0 -10px #e9458a; }
    40% { box-shadow: 0 0 20px #e9458a; }
    60% { box-shadow: 0 0 20px #e9458a;}
    100% { box-shadow: 0 0 -10px #e9458a;}
}

@keyframes glowing2 {
    0% { box-shadow: 0 0 -10px #ad45e9; }
    40% { box-shadow: 0 0 20px #ad45e9; }
    60% { box-shadow: 0 0 20px #ad45e9;}
    100% { box-shadow: 0 0 -10px #ad45e9;}
}

@-webkit-keyframes glowing2 {
    0% { box-shadow: 0 0 -10px #ad45e9; }
    40% { box-shadow: 0 0 20px #ad45e9; }
    60% { box-shadow: 0 0 20px #ad45e9;}
    100% { box-shadow: 0 0 -10px #ad45e9;}
}

<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>

- Aquila

2个回答

0

可以使用以下代码，在动画完成后停止它的跳跃

    animation-fill-mode: forwards;

这个问题似乎也在这里得到了解答 - CSS Keyframe Animations on Hover - Animation Resetting with Mouse Movement

- Jared Bledsoe

1

那个其他的答案似乎在问类似于我的问题，但结果并不是我想要的。我希望动画在悬停时能够无缝地重复播放，而不是突然重置。我也尝试了你的建议，但似乎没有改变。我是实现有误吗？https://jsfiddle.net/Lbu18j2a/ - Aquila

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

要制作悬停动画，transition是一个很好的功能，可以在取消悬停时反转动画。

table {
    max-width:1000px!important;
    padding:15px;
    word-wrap:
    break-word;
    background-color:#ffffff;
    border: 7px solid #454ce9;
    box-shadow: 0 0 -10px #e9458a;
    transition: box-shadow 2500ms;
}

table:hover {
    box-shadow: 0 0 20px #e9458a;
}

<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>

如果仍然使用animation，请使用animation-play-state和animation-fill-mode: forwards使其在悬停时运行并在取消悬停时保持状态。

在下面的示例中，我使用了它们的长手写属性，尽管它们可以添加到简写中，例如对于animation-fill-mode：animation: glowing 5000ms infinite forwards;。

我建议将animation-play-state保留为长手，因为它在IE上不起作用（如果我记得正确，在旧版本的Edge上也是如此）。

请注意，box-shadow上的负<blur-radius>值不允许（我注意到它在Chrome上可以工作，但在IE / Edge上无法工作）。

table {
    max-width:1000px!important;
    padding:15px;
    word-wrap:
    break-word;
    background-color:#ffffff;
    border: 7px solid #454ce9;
    animation: glowing 5000ms infinite;
    animation-fill-mode: forwards;          /*  persist state  */
    animation-play-state: paused;           /*  pause the animation  */
}

table:hover {
    animation-play-state: running;           /* play the animation  */
}


@keyframes glowing {
    0% { box-shadow: 0 0 0px #e9458a; }
    40% { box-shadow: 0 0 20px #e9458a; }
    60% { box-shadow: 0 0 20px #e9458a;}
    100% { box-shadow: 0 0 0px #e9458a;}
}

@-webkit-keyframes glowing {
    0% { box-shadow: 0 0 0px #e9458a; }
    40% { box-shadow: 0 0 20px #e9458a; }
    60% { box-shadow: 0 0 20px #e9458a;}
    100% { box-shadow: 0 0 0px #e9458a;}
}

<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>

根据评论更新

在动画过程中也可以改变颜色。

table {
    max-width:1000px!important;
    padding:15px;
    word-wrap: break-word;
    background-color:#ffffff;
    border: 7px solid #454ce9;
    animation: glowing 5000ms infinite forwards;
    animation-play-state: paused;
}

table:hover {
    animation-play-state: running;
}

@keyframes glowing {
    0% { box-shadow: 0 0 0px red; }
    25% { box-shadow: 0 0 20px blue; }
    50% { box-shadow: 0 0 20px green;}
    75% { box-shadow: 0 0 20px yellow;}
    100% { box-shadow: 0 0 0px red;}
}

<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>