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

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?