Animation fill-mode not working

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 {
    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) => { = "1s linear 1 forwards slideIn";
    plain.addEventListener('mouseleave', (e) => { = "0"; = "1"