CSS PLAY
Doing It With Style
Just CSS. Absolutely NO jQuery/javascript or any other programming language.
On the previous rerun demonstration it is possible to click/tap the animation at any point to make it start again from the beginning.
So with this in mind I have produced this second version in which it is only possible to rerun the animation once it has finished running.
This animation started life as an animated gif which has be converted into separate frames, using an online converter, and then animated using @keframes.
The images are stacked on top of each other using position absolute and moved left:-100% so that they are hidden.
The animation then moves each one to left:0 so that they become visible one after the other.
The ski animation rerun is triggered using a 'cover' div which is also animated to appear on top of the images once the animation has ended.
The rerun of both ski animation and cover uses #cover:active {display:none;} and #cover:active + #frames {display:none;}.
Again, to get this to work on iOS Safari, you also need to add tabindex="0" to the <body>.
To stop a flash of white background when display:none; is activated, you will need to have the first image as a background image in the #film div.
Update 8th January 2022
Because the original demonstration had 150 frames and a timing of 0.03s between frames, iOS Safari had difficulties rendering each frame and produced a jumpy animation I have used another animation that is just 31 frames with a timing of 0.1s between frames.
This version has been produced from an original Art Animation GIF by Julie Winegard
The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.