Animate on hover using javascript and css - css

Question

I'm new to javascript. I have created a div with shining effect (original code https://patrickdesjardins.com/blog/css3-shining-animation-for-html-element). Animation is set on the background position of of background image that is created by linear gradient from transparent to white to transparent which makes it look like shiny. So, I added javascript onmouseover event on div which will set the animation to div element. It works but only once. It stops working when mouse passes over div second time. Why is that? What should I do to make it work repeatedly?
Here's the css code:
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
div
{
background-color:#990000;
padding:50px;
margin:10px;
}
Here's the html:
<div id="shine-me" onmousemove="myfunction()">
Here's the javascript:
function myfunction()
{
document.getElementById("shine-me").style.animationName = "ShineAnimation";
document.getElementById("shine-me").style.animationDuration = "4s";
}

Answer 1

You don't need javascript at all for that. Instead, just define the animation in the div's hover state:
div:hover {
animation-name:ShineAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Or, using the shorthand:
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
I think your animation is not working quite right, but that's a separate issue. Also you were missing a closing bracket after the keyframes definition. That may have been just a bad copy-paste?
CSS animation documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
}
div {
background-color:#990000;
padding:50px;
margin:10px;
}
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
<div id="shine-me">

Answer 2

If you want using javascript, you have to remove the animation also. In my example i choosed a class instead of style. On hover i add the animation class and on mouseout i remove it again.
const shineMe = document.getElementById('shine-me');
function addAnimation() {
shineMe.classList.add('animation')
}
function removeAnimation() {
shineMe.classList.remove('animation')
}
shineMe.addEventListener('mouseover', addAnimation);
shineMe.addEventListener('mouseout', removeAnimation);
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 37%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
background-position: -450px -450px;
background-size: 2000px 2000px; }
to {
background-repeat: no-repeat;
background-position: 450px 450px; } }
div {
background-color: #990000;
padding: 50px;
margin: 10px; }
.animation {
-webkit-animation-name: ShineAnimation;
animation-name: ShineAnimation;
-webkit-animation-duration: 4s;
animation-duration: 4s; }
<div id="shine-me"></div>