Smooth stop animation infinite in animation and start from the same position?

Question

css

Hello, there is a task to animate an element when hovering over it. It is necessary that when you hover over the element it should rotate smoothly, I did all this in css, here is a sketch . But there is a problem, when we move the mouse away from the element, it abruptly stops and returns to its original position.
Question : Is it possible to somehow make it smooth, that is, when we move the mouse away from the element, the rotation ends smoothly and the element itself remains in the same position (with the same rotation angle), can this be done on JS (the whole animation - rotation, and calculation of the current position, etc.). Can you tell me any solution to this problem or the implementation of such an animation?

Answer 1

code.mu/css/animation-play-state.html