[–] netk6 [S] 0 points 1 points (+1|-0) ago  (edited ago)

Here's an interesting little trick I used with the start button that you might like.

The customer requested that the animation works without JavaScript support and has a start button. Having an HTML page with the start button and another one with the animation is not ideal.

Instead, I made the start button a relative link to #start.
When clicked, it changes the URL but doesn't load another page.
It just scrolls to the HTML element with the id attribute value equal to start.

In the CSS file however, it's possible to detect this URL change with #start:target.
It goes like this:

#start #anim { /* page loaded*/ }
#start:target #anim { /* animation started */ }

Apply the id attribute to the correct HTML element and you are done.
There's now a before the start button is pressed, and an after.

In the linked animation, I set the id attribute on the body element, but you can set it directly on the animation container.
If you have multiple animations, it will scroll to the correct one and start it immediately. Perfect!

There's a bit of JavaScript that replaces this little trick entirely. It runs the animation just once, then displays a replay button, but is not required.