Hover over a shape and its animation runs.
When the mouse isn't hovering, the animation stops.
When you hover again, the animation continues from where it stopped.
Put class="shape" into the g element and not in the individual path elements. Then the mouse hover sets the transformation going for all three shapes. And, of course, stops it for all three when the mouse is taken away.
Suppose there were multiple copies of a box which changed colour as your hovered over it. Would it be possible to 'draw' on the surface of boxes which changed as you "mouse hovered"?