Keep item animated after unhover

Question

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

Tintinnabulation

sounds like you want it to rotate all the time . Is that right ? – Ruthanneruthe

@Ruthanneruthe no, it should keep rotating until its finished with the animation it would have been doing if the cursor is on the object – Tintinnabulation

You need javascript for that – Coachandfour

So it's not a question of it 'resuming' the rotation but once hovered it should rotate all the way round even if the hover is removed. Is that right? – Flite

It sounds like @Tintinnabulation wants the animation to start when the the mouse is hovered over the element, and finish (or keep running) even if the mouse is no longer hovering the element. – Coachandfour

Exactly ⠀⠀⠀⠀⠀⠀⠀ – Tintinnabulation

Answer 1

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 class="header">
  <div class="logo">
    <img src="https://picsum.photos/id/1015/200/300">
  </div>
</div>

Flite