悬停时继续 CSS3 关键帧动画/悬停时停止重复

Question

我设置了 CSS3 动画，我只想更改悬停时的框阴影颜色。但是，当我这样做时，动画会突然重置。有什么办法可以在没有跳跃的情况下继续悬停无缝动画？如果我需要使用 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>

Answer 1

要做悬停动画，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> 是不允许的（我注意到它在 IE/Edge 上不起作用，但在 Chrome 上却可以）

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>

Answer 2

当然，一旦动画完成，用这个来阻止它跳回来

    animation-fill-mode: forwards;

这里似乎也得到了回答-CSS Keyframe Animations on Hover - Animation Resetting with Mouse Movement