Animation css3动画打开：悬停；强制整个动画

我已经创建了一个简单的反弹动画，我将其应用于元素的

：hover

状态：

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}

.box:hover { 
    animation: bounce 1s;
}

动画工作正常，但当您从元素中移除光标时，它会突然停止。即使鼠标已退出，是否仍有强制它继续设定的迭代次数？基本上，我在这里寻找的是一个由

：hover

状态触发的动画。我不是在寻找一个javascript解决方案。我还没有在规范中看到这样做，但也许有一个明显的解决方案我错过了这里

---

这里有个小把戏：

恐怕解决这个问题的唯一方法是使用一点javascript，您必须将动画作为类添加，然后在动画完成后将其删除

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

---

一个简单的技巧就可以完成这项工作：

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

将“延迟”设置为元素上的高值（非：悬停）

---

From:

CSS在某些情况下可能会有所帮助，但并非所有情况下都会有所帮助。下面是在悬停和悬停后设置字母间距动画的代码

h1
{
-webkit过渡：所有0.3秒轻松；
}
h1：悬停
{
-webkit过渡：所有0.3秒轻松；
字母间距：3px；
}

你好

为了提高Duopixel的回答，当运行无限动画时，我必须执行以下操作：

$(".box").css("animation-iteration-count", "1"); 
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(".box").css("animation-iteration-count", "infinite"); 
  $(this).addClass("animated");        
})

这不会突然结束动画。

如果有人想使用它，我在同一篇文章中使用纯Javascript创建了一个带有此答案的脚本

const elements = document.getElementsByClassName('box');

for (let i = 0; i <= elements.length; i++) {
  elements[i].addEventListener('animationend', function(e) {
    elements[i].classList.remove('animated');
  });

 elements[i].addEventListener('mouseover', function(e) {
   elements[i].classList.add('animated')
 })
}

const elements=document.getElementsByClassName（'box'）；
对于（设i=0；i与@methodofaction的答案相同，但对于使用React的任何人：

import React，{useState}来自“React”；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
导出默认函数图标（{Icon}）{
const[animated，setAnimated]=使用状态（false）；
返回(
设置动画（（）=>true）}
onAnimationEnd={（）=>setAnimated（（）=>false）}
>
);
}
希望避免使用javascript，但我认为这是唯一的方法。浏览器不可知的事件名称应全部为小写：animationEnd如果我想在移除悬停时优雅地停止动画，然后在再次悬停时再次启动无限动画呢？您可以实现框的mouseleave事件，您可以在那里添加此代码。开发了一个解决方案：D这是小提琴，如果它对任何人都有帮助的话！谢谢@Vinay！你的解决方案真的很有帮助！有可能确保动画结束，但在反面吗？这个解决方案不起作用。这是一个过渡，不是动画。