悬停项目时仍然旋转 html

Question

我有一个图标，当你悬停在它上面时它会旋转，但只有在悬停时才会旋转，而不是在 'unhover' 上。然而，当从对象中移除光标时动画停止。即使光标不再位于对象上，我如何让它恢复动画？我的代码：

.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;
}

感谢您的提前帮助

Answer 1

你需要元素 'remembering' 的某种方式来进行旋转。

为此，您需要一些 Javascript 来感知鼠标何时悬停在元素上以及感知过渡何时结束。这些事件将分别添加和删除一个class。

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>

悬停项目时仍然旋转 html

Still rotate on item unhover html

html

css

css-animations