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?
paused
using theanimationend
event in the browser, which requires js.