Just CSS. Absolutely NO jQuery/javascript or any other programming language.

The easiest (and probably the correct) way to replay/restart a CSS animation.

No need to resort to using javascript/jQuery, or use display:none, or even use two animations.

This uses just one simple CSS style that is just right for this problem.

animation:unset;

"The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not."

So animation:unset; resets the animation to its initial value enabling it to run again.

Just two lines of CSS rerun/restart the animation :-
#animation:hover {cursor:pointer;}
#animation:active {animation:unset; cursor:pointer;}

This applies to ANY animation where the initial position is styled before the animation styling.