How to make two-sided animation?

Question

css

On the circle below, I made an animation and add a class to it when clicked, but when I click again, I want it to smoothly return to its original position, and it just abruptly rises to its original position. How to make a smooth return back?



PS: I did something similar (), but I think these are crutches and there is a bug - if you click in the middle of the animation, it will be interrupted and the circle will go to the initial state of another animation. Not beautiful

Answer 1

To do this, you can limit yourself to a simple transition with a delay in execution. Not without its flaws, but it does not jump to zero frames.

Answer 2

Subscribe to animation events and block the execution of your code if the animation is in progress.