How to play the animation in reverse order when moving the cursor?

Question

css

The problem is simple:
I have 2 sides, front and back respectively. When hovering over, the animation playback should lift and flip the card to the other side, and turn it back when retracted. But in fact - resets the animation to the first frame. Thanks in advance.
THE CODE

Answer 1

https://codepen.io/topicstarter/pen/oNLBVzW this is how it's done