Still rotate on item unhover html-CodePudding

I have an icon that rotates when you hover on it, but only on hover not on 'unhover'. The animation however stops when removing the cursor from the object. How can I let it resume the animation even when the cursor isn't on the object anymore? My Code:

.header .logo img {
    transform: rotate(0deg);
    transition: transform 0s 0s; 
}

.header .logo img:hover {
    transform: rotate(360deg);
    transition: transform 1.2s;
    animation-play-state: running;
}

Thank you for helping in advance

CodePudding user response：

You need some way of the element 'remembering' that it has to carry on rotating.

For that you'll need a bit of Javascript to sense when the mouse is hovering over the element and to sense when the transition has ended. These events will add and remove a class respectively.

const div = document.querySelector('.header .logo img');

function addRotate() {
  div.classList.add('rotate');
}

function removeRotate() {
  div.classList.remove('rotate');
}
div.addEventListener('mouseover', addRotate);
div.addEventListener('transitionend', removeRotate);

.header .logo img {
  transform: rotate(0deg);
  transition: transform 0s 0s;
}

.header .logo img.rotate {
  transform: rotate(360deg);
  transition: transform 1.2s;
}

<div >
  <div >
    <img src="https://picsum.photos/id/1015/200/300">
  </div>
</div>