Continue CSS3 Keyframes Animation on Hover / Stop Repeat on Hover

user_5203988 0
Viewed 2233

I have a CSS3 animation set up and I just want to change the box-shadow color on hover. However, when I do it, the animation abruptly resets. Is there any way to continue the seamless animation on hover with no jumping? If I need to use javascript or jquery, that's fine, but I'd prefer if there was a CSS3 solution. Any help is appreciated.

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>

css-animations hover animation css javascript
2 Answers

To do hover animations, transition is a great feature that reverse the animation when unhover.

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>

If to still use animation, use animation-play-state and animation-fill-mode: forwards to make it run when hovered and keep state when unhovered

In below sample I used their longhand properties, though they can be added to the shorthand, i.e. like this for the animation-fill-mode animation: glowing 5000ms infinite forwards;.

I would keep animation-play-state as longhand, as it won't work on IE (and, if I remember correct, on older versions of Edge).

Note, negative <blur-radius> values on box-shadow is not allowed (and I noticed it won't work on IE/Edge but it did on 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>

Updated based on a comment

It is also possible to change color during the animation

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>

user_28278230
user_51490510
Related