CSS PLAY
Doing It With Style
Just CSS. Absolutely NO jQuery/javascript or any other programming language.
I have been searching the web for quite some time to see if anyone had found a way to rerun a @keyframe animation using just CSS, but could not find an answer.
Every method I found use some jQuery/javascript to remove the animation html and then replace it so that it would rerun.
So I thought I would investigate this myself.
After several weeks I have found a method that uses no jQuery/javascript, AND uses simple HTML/CSS.
This just uses an :active pseudo-class on the containing element, which is used to set the animation to display:none for a split second and then return to display:block.
This restarts the animation.
BUT iOS Safari does not normally support :active.
I then had to find a method of making iOS Safari support the :active pseudo-class, but could only find methods that involved using jQuery/javascript. So back to finding a CSS/html only answer.
After much testing I have found that by adding the html tabindex="0" to the <body> it triggers something in iOS Safari so that it recognises :active.
So here it is, an animation is a cat that I designed using just CSS back in 2011.
Just click/ tap this animation to make it rerun.
The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.