CSS. Play animation while hovering, but not abrupt end
I am trying to create a kind of loading animation with 3 bars below eachother that have separate keyframes.
The 3 bars represent the elements div
located inside the parent div
.
<div id="menu">
<div id="menubox1"></div>
<div id="menubox2"></div>
<div id="menubox3"></div>
</div>
Animation properties are assigned to separate 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 hovers over the parent div .
My attempt was to play animation-play-state
around with which was set to running
or paused
, depending on how the parent div
was frozen.
The problem is that the animation pauses instantly before the animation finishes, which looks bad if it stops in the middle of the movement.
Is there a good fix for this, preferably without JavaScript / jQuery and across all browsers?
source to share
As you can see it is currently not possible to do this with just CSS, and as the good jquery answers have already mentioned it is worth mentioning that it can be resolved in multiple 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));
})
non-es6: BABEL
source to share