How to prevent interruption of css animation?

Question

css

There is such an example: https://jsfiddle.net/1bx611L9/2
The problem is that if you hover over a div and quickly move away, the animation is interrupted. What can be done to make the animation continue to flow until the end when the cursor is moved?

Answer 1

Only via javascript mouseover event