javascript - CSS - 悬停时播放动画，但不会突然结束

Question

我正在尝试创建一种加载动画，其中 3 个条形图彼此下方，都有单独的关键帧。

这 3 个条是 div 元素，位于父级 div 内。

<div id="menu">
    <div id="menubox1"></div>
    <div id="menubox2"></div>
    <div id="menubox3"></div>
</div>

动画属性分配给各个 menubox id。

#menubox1:after {
    content: '';
    position: absolute;
    bottom: 0px;
    transform: translateY(-50%);
    border-top: 1px solid #FFDADA;

    animation: menukeyframes1;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: inherit;
}

@keyframes menukeyframes1 {
     0% { width: 100%; left:0;}
     ...
}

我的目标是在光标悬停在父 div 上时播放动画。

我的尝试是尝试设置为running 或paused 的animation-play-state，具体取决于父 >div 悬停。

问题是动画在动画完成之前立即暂停，如果它在运动中途停止看起来有点糟糕。

是否有解决此问题的好方法，最好不使用 JavaScript/jQuery，并且适用于所有浏览器？

Answer 1

如您所见，此时仅用 CSS 无法完成，并且已经引用了很好的 jquery 答案，值得一提的是，它可以在几行 vanillaJS 中解决:

var dur = 2000;
document.querySelectorAll('.smooth').forEach(el=>{
  var t;
  el.addEventListener('mouseover',_=>{t = performance.now();el.style.animationPlayState = 'running'})
  el.addEventListener('mouseout',_=>window.setTimeout(()=>el.style.animationPlayState = 'paused',dur-(performance.now()-t)%dur));
})

working pen

非 es6:BABEL