How to correctly handle css animation completion?

Question

css

Good afternoon toasters.
The question is interesting.
There is an element that, when you hover over it with the mouse, starts to animate: js adds a class to it, for which keyframes are written - everything is standard.

Example in jsfiddle (live example test7.tsymbal.su/service.php ). Hover over the wheel on the right above the "Cut pipes" block.
The element rotates cyclically until we move the mouse to the side. The class is removed and, accordingly, the element abruptly returns to its original position.
And I would like to:
a) the animation is maintained until the completion of the full circle, and, as a result, the element would return to its original state, and then stop.
b) there was a smooth slowdown and stop on any frame.
Any tips, crutches (including foreign languages), life hacks, new css standards are accepted. :)

Answer 1

Remove js
In css, prescribe an infinite animation to the element and at the same time
animation-play-state: paused;
On hover change paused to running
If you want a name in js, then the animation is once and

elem.addEventListener("animationend", function() {
  // проверяем нужно ли запускать анимацию на новый цикл, или уже всё
})