How to make transform: scale work with transition and animation on hover?

I am trying to make hover scale work smoothly with animation scale. Hover works with #test but with .rotate I can't get it to work correctly. Also, why the hover scale doesn't work when the animation-fill-mode is forwards instead of none?

https://codepen.io/yoholil/pen/qBLbYYm

let flag = false;
let test = document.querySelector("#test")


test.addEventListener("click", function() {
  console.log(1);
  flag && test.classList.add("rotate");
  !flag && test.classList.remove("rotate");
  flag = !flag;
});

#test {
  width: 200px;
  transition: 0.3s ease;
  animation: rotateRight 0.3s ease-in-out none;
}

#test:hover {
  transform: scale(1.2);
}

#test.rotate {
  transform: scaleX(-1);
  animation: rotateLeft 0.3s ease-in-out none;
}

@keyframes rotateRight {
  0% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes rotateLeft {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
  }
}

<img id="test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Cj8qpuV