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
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>