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 上时播放动画。

我的尝试是使用设置为animation-play-state或running的{{1}}，具体取决于父paused是否已悬停。

问题是动画在动画完成之前立即暂停，如果它停止中间动作则看起来很糟糕。

是否有一个很好的解决方案，最好没有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

Answer 2

您始终可以使用过渡淡出动画div。这样的事可能适合你：

#menubox1 {
  opacity: 0;
  transition: opacity .5s linear;
}

#menu:hover {
  #menubox1 {
    opacity: 1;
    transition: opacity .5s linear;
  }
}

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

2 个答案: