Hacker News Reader

Comment by VladimirGolovin | Hacker News Reader

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/

View on HN

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%...

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

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.

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%...

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

Using tailwind. Animation should be slower and smoother now

Reply on news.ycombinator.com