Animation fill-mode not working

HTML-CSS
#1

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

Can you provide a codepen for your project.?

#3

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"
    })
#4