How to smoothly change css animation speed on hover?

Question

css

How, in this example, to smoothly change the animation speed when hovering the mouse?
https://jsfiddle.net/2sadzkdx/
At the moment there is an unpleasant jerk and an abrupt stop.

Answer 1

Notice the animation-timing-function property