Hello !
I have this code below to do a slide-in animation on hover of the sibling above; it works fine but the animation fill
mode forwards doesn’t work which means that when the sibling isn’t being hovered the animation resets…
any idea how to fix it ? or must i write it in plain javascript instead of css?
#siblingDiv:hover ~ #content > #slideIn1 {
animation: 1s linear 1 slideIn;
animation-fill-mode: forwards !important
}
@keyframes slideIn {
0%{
left: -1000px;
}
100% {
opacity: 1;
left: 0;
}
}
Can you provide a codepen for your project.?
Nevermind, solved it using this and writting only the keyframes in css. The animation persists then since it isn’t displayed on hover. It s a bit of a hack because the keyframes is kind of defined alone in the css but it works
var plain = document.getElementById('plain');
var slideIn1 = document.getElementById('slideIn1');
plain.addEventListener('mouseover', (e) => {
slideIn1.style.animation = "1s linear 1 forwards slideIn";
})
plain.addEventListener('mouseleave', (e) => {
slideIn1.style.left = "0";
slideIn1.style.opacity = "1"
})