Use mouseover to add animation on hover

I’m trying to add an animation to an element when someone hover on it.

My thought is to add a class with keyframes that attach to the element by adding a mouseover event listener to it.

The reason I don’t use CSS is because I want the animation to be finished even the mouse leave the element before the animation is finished. For example, the mouse is moved out of element when rotating on 180 degree (full animation is 360 degree)

But sadly it’s not working and I don’t know why…

const item = document.querySelector('#rotate');

item.addEventListener('mouseover' function(e) {
  if(item) e.classList.add('rotate');
});

#div {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.rotate {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div id='rotate'></div>