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

Posted 2023-03-06

【中文标题】悬停时继续 CSS3 关键帧动画/悬停时停止重复

【英文标题】：Continue CSS3 Keyframes Animation on Hover / Stop Repeat on Hover

【发布时间】：2018-03-09 02:00:36

【问题描述】：

我设置了 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>

【参考方案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>

【讨论】：

谢谢！我知道我可以这样做，但我想保留关键帧动画，因为效果与简单的过渡不同，连续淡入淡出是我想要的效果。我仍然想知道这是否可能。

@Aquila 由于另一个答案删除了它的初始解决方案，我将它添加到我的解决方案中，并附上一些注释以使其在 IE/Edge 上运行。

非常感谢！这更回答了我的问题。我还想知道一件事：我是否能够使用此解决方案更改悬停时的框阴影颜色，还是 CSS 无法做到这一点？

@Aquila 添加了第 3 个也会改变颜色的示例

谢谢！这回答了我的问题。

【参考方案2】：

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

    animation-fill-mode: forwards;

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

【讨论】：

其他答案似乎要求与我类似的东西，但结果不是我想要的。我希望动画在悬停时保持无缝重复，而不是突然重置。我也试过你的建议，但似乎没有改变。我执行不正确吗？ jsfiddle.net/Lbu18j2a