css - css3 animation to flip from right side

Question

I have VueJS application wherein I have overlay which opens on button click event, However I would like to have it animated and coming from right, my current CSS3 animation code below on button click event, but apparently it does not do stuff I would like achieve.

.slide-fade-enter-active {
  transition: all 0.2s ease;

  transform: translate(10px, 0px);

  opacity: 0.5;
}

.slide-fade-leave-active {
  transition: all 0.11s ease;
  opacity: 1;
}
.slide-fade-enter, .slide-fade-leave-to   {
  transform: translateX(50px);
  opacity: 0;
}

HTML for overlay:

<transition name="slide-fade">
...overlay content
</transition>

question from:https://stackoverflow.com/questions/65626553/css3-animation-to-flip-from-right-side

Answer 1

Waitting for answers