Question

我正在尝试使动画图标每次在悬停时都可以播放，而不是一次即可播放。但是我无法使其与mouseout一起使用。有我的代码：

<div class="shapeshifter" id='btn' style="background-image: 
url(sprite_60fps.svg) "></div>

<script>
document.getElementById('btn').addEventListener('mouseover', 
    function() {
    this.classList.add('play');
}); 

 </script>

Answer 1

您需要的是“在鼠标输入时使用js重新启动CSS动画”。

在鼠标输入时调用此功能：

function reset_animation() {
  var el = document.getElementById('btn');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

确保不要在鼠标悬停时使用它，而在mouseenter上使用它。

（更多信息：Restart animation in CSS3: any better way than removing the element?）

我想在动画图标上重复mouseover功能

1 个答案: