CSS - Play animation while hovering, but not with an abrupt end

Question

I am trying to create a sort of loading animation, with 3 bars that are below eachother that all have seperate keyframes.

The 3 bars are div elements, located inside a parent div.

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

The animation properties are assigned to the individual menubox ids.

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

My goal is to play the animation while the cursor is hovering over the parent div.

My attempt was to play around with animation-play-state which was set to running or paused, depending if the parent div was hovered.

The problem is that the animation is immediatly paused, before the animation is complete, which looks kind of bad if it stops mid-motion.

Is there a good fix for this, preferrably without JavaScript/jQuery, and across all browsers?

Answer 1

As you see it can't be done with just CSS at this moment, and as good jquery answers are already referenced, it's worth to mention that it could be solved in few lines of 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

non-es6: BABEL

Answer 2

You can always fade out the animated divs using transitions. Something like this might work for you:

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

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