Why does the animation only play once?

Question

css

Hello. There is a panel that should go out on the right. I wrote the animation, but - it works only once, and the second and subsequent times it just appears without animation, here is the code:

animation-name: popup_from_right;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;


@keyframes popup_from_right {
    0%
    {
        opacity: 0;

        transform: translateX(100%);
    }

    100%
    {
        opacity: 1;

        transform: translateX(0);
    }
}

What is the problem?

Answer 1

css animation also has events. You need to remove the animation class from the element on click, and then assign it again.

Answer 2

https://css-tricks.com/restart-css-animation/ please read.