How to make "finishing" animation?

Question

css

There is a square that rotates around its center on hover using the animation property.
animation-iteration-count is set to infinite and when the hover is terminated, the square abruptly melts into its initial position. Is it possible to make a smooth fine-tuning to the initial state on only one css.
And I would be glad if it turned out to be possible to smoothly return to the initial position. That is, do not bring to the end, but always return to the initial position at a constant speed.

Answer 1

Not on CSS. Here JS is.