[VladimirGolovin]

Very timely and helpful, thank you!

A suggestion: the pulse animation would look much better with ease-in / ease-out animation curves instead of the harsh linear curve it's currently using. EaseInOutSine from this cheat sheet would do fine: https://easings.net/

[myfonj]

If you'd like to try those easings straight away, you can use this bare-bones rip-off in interactive sandbox [0]. Still basic: animation is symmetrical, so easing "in" has the same easing as "out", just reversed.

Under 2 kB total. HTML, mostly CSS and literally two lines of JS only for restarting the animation.

[0] https://myfonj.github.io/sandbox.html#%3C!doctype%20html%3E%...

[KTibow]

Wait, why do you need anything other than CSS? Animations can have easing and loop indefinitely without JS.

[myfonj]

Sure, you are right about infinite non-interactive CSS animations. And it's true there are simple checkbox:checked or whatever:active hacks for interactivity without JS. But for "click to (re)restart animation" there is no better cross-browser way I am aware of than toggling on some trigger attribute and toggling it off on animation end event, hence the JS.

[myfonj]

Ok, so here is variation that contains zero JS and (ab)uses the "invisible_anchor:focus + sibling_anchor_pointing_to_previous_anchor" trick [0]. I'd prefer the original version, though. This is more or less a hack.

[0] https://myfonj.github.io/sandbox.html#%3C!doctype%20html%3E%...

[dunno7456]

Or some Newtonian like in https://www.youtube.com/watch?v=n-txrCMvdms (9m47s)

[junetic]

Using tailwind. Animation should be slower and smoother now