How do I use JavaScript to make a onmouseover css animation don't reset when I stop hovering?

Asked Dec 10 '20 at 19:25

Active Dec 10 '20 at 19:25

Viewed 26 times

Sorry for the big title, but I made a spinning animation with a image using css, so when I hover my mouse over it, the image spins. The thing is, I wanted it to not reset when I'm not hovering anymore.

HTML:
<img src="dieimg.png" class="die" width="50" height="50" id="die">

CSS:
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}
.die:hover {
  -webkit-backface-visibility: hidden;
  animation: 1s spin;
}
.die {
  -webkit-backface-visibility: hidden;
}

I'm new to JavaScript (and to html and css as well, but not as much) and I would appreciate if you could give me something so I can understand the code better, as well as the code for it.

asked Dec 10 '20 at 19:25

Night

2

You'll need to start the animation via JavaScript instead of CSS when the `mouseover` event occurs. – Scott Marcus Dec 10 '20 at 19:29
Would you have the code and some explanations? – Night Dec 10 '20 at 19:31
See the referenced answer for that. – Scott Marcus Dec 10 '20 at 19:34
But where's the code? I only see what I need to do, but I don't know how to do it... – Night Dec 10 '20 at 19:40

How do I use JavaScript to make a onmouseover css animation don't reset when I stop hovering?

0 Answers0