Question

我设置了CSS3动画，我只想在悬停时更改框阴影颜色。但是，当我这样做时，动画会突然重置。有没有办法在没有跳跃的情况下继续悬停无缝动画？如果我需要使用javascript或jquery，那很好，但我更喜欢有CSS3解决方案。任何帮助表示赞赏。

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

Answer 1

要悬停动画，transition是一项很棒的功能，可以在取消切换时反转动画。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

我会保持animation-play-state的缩写，因为它不会在IE上工作（如果我没记错的话，在旧版本的Edge上）。

请注意，<blur-radius>上的box-shadow值不允许（我注意到它不能在IE / Edge上工作，但它在Chrome上有效） < / p>

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

根据评论更新

也可以在动画期间更改颜色

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

Answer 2

当然，使用它可以阻止它在动画完成后跳回来

    animation-fill-mode: forwards;

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

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

2 个答案: