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.

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

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