How to fix svg animation durations in js?

Question

JavaScript

Hello everyone

I made an animated svg icon in js , when you hover over the red block, classes with animation are added, if you remove the cursor, the classes are deleted.

The problem is that the duration of the animation is about 2.8 seconds,
if you move the cursor and immediately remove it, the animation does not have time to end.

If in a.onmouseover = setTimeout( function(e) { ... }, 4000)
The animation ends even after the cursor is removed, but the classes are not deleted...

Please help solve the problem:
1) you need to make sure that the classes are deleted after the cursor was removed, but at the same time so that the animation had time to end
2) How to make the icon not displayed immediately, but gradually displayed when hovering over the block? with animation rendering

https://codepen.io/Zhelezniy/pen/KKmPrpJ

Answer 1

There is an addition like this - lazyLinePainter and this is how I used it: https://codepen.io/topicstarter/pen/xxdKemy
To do it your way, you need to drag your svg file to the area where the arrow is - edit the delays and the animation itself and download the zip