3 ms·
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 line
by VladimirGolovin 3y ago
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/ https://easings.net/
- myfonj 3y agoIf 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%3Chtml%20lang%3D%22en%22%3E%3Ctitle%3Ehalf%20minute%20focus%3C%2Ftitle%3E%0A%3Cmeta%20name%3D%22color-scheme%22%20content%3D%22dark%20light%22%3E%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%3Cstyle%3E%0Ahtml%20%7B%0A%20--easing%3A%20cubic-bezier(.7%2C%200%2C%20.3%2C%201)%3B%0A%20--limit-seconds%3A%2030%3B%0A%20--in-out-seconds%3A%205%3B%0A%20--cycles-count%3A%20calc(var(--limit-seconds)%20%2F%20var(--in-out-seconds)%20*%202)%3B%0A%20--duration-seconds%3A%20calc(.5s%20*%20var(--in-out-seconds))%3B%0A%20min-height%3A%20100vh%3B%0A%20display%3A%20grid%3B%0A%20place-items%3A%20center%3B%0A%7D%0Abutton%20%7B%0A%20XXanimation-name%3A%20run%3B%0A%20animation-direction%3A%20alternate%3B%0A%20animation-timing-function%3A%20var(--easing)%3B%0A%20animation-duration%3A%20var(--duration-seconds)%3B%0A%20animation-iteration-count%3A%20var(--cycles-count)%3B%0A%20width%3A%2040vmin%3B%0A%20height%3A%2040vmin%3B%0A%20background-color%3A%20canvastext%3B%0A%20color%3A%20canvas%3B%0A%20border%3A%20none%3B%0A%20border-radius%3A%2050%25%2050%25%3B%0A%7D%0A%5Baria-pressed%5D%20%7B%0A%20color%3A%20canvastext%3B%0A%20animation-name%3A%20run%3B%0A%7D%0A%40keyframes%20run%20%7B%0A%20from%20%7B%0A%20%20transform%3A%20scale(1)%3B%0A%20%20opacity%3A%20.5%3B%0A%20%20filter%3A%20blur(1vmin)%3B%0A%20%7D%0A%20to%20%7B%0A%20%20transform%3A%20scale(2)%3B%0A%20%20opacity%3A%20.9%3B%0A%20%20filter%3A%20blur(.1vmin)%3B%0A%20%7D%0A%7D%0A%3C%2Fstyle%3E%0A%3Cbutton%0A%20onclick%3D%22setAttribute('aria-pressed'%2Ctrue)%22%0A%20onanimationend%3D%22removeAttribute('aria-pressed')%22%0A%3EClick%20to%20animate.%3C%2Fbutton%3E https://myfonj.github.io/sandbox.html#%3C!doctype%20html%3E%...
- KTibow 3y agoWait, why do you need anything other than CSS? Animations can have easing and loop indefinitely without JS.
- myfonj 3y agoSure, 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 3y agoOk, 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%3Chtml%20lang%3D%22en%22%3E%3Ctitle%3Ehalf%20minute%20focus%3C%2Ftitle%3E%0A%3Cmeta%20name%3D%22color-scheme%22%20content%3D%22dark%20light%22%3E%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%3Cstyle%3E%0Ahtml%20%7B%0A%20--limit-seconds%3A%2030%3B%0A%20--in-out-seconds%3A%205%3B%0A%20--cycles-count%3A%20calc(var(--limit-seconds)%20%2F%20var(--in-out-seconds)%20*%202)%3B%0A%20--duration-seconds%3A%20calc(.5s%20*%20var(--in-out-seconds))%3B%0A%20min-height%3A%20100vh%3B%0A%20display%3A%20grid%3B%0A%20place-items%3A%20center%3B%0A%7D%0A%23go%20%7B%20%0A%20opacity%3A%200%3B%0A%20%26%20%2B%20a%20%7B%0A%20%20animation-direction%3A%20alternate%3B%0A%20%20animation-timing-function%3A%20cubic-bezier(.7%2C%200%2C%20.3%2C%201)%3B%0A%20%20animation-duration%3A%20var(--duration-seconds)%3B%0A%20%20animation-iteration-count%3A%20var(--cycles-count)%3B%0A%20%20animation-fill-mode%3A%20none%3B%0A%20%20width%3A%2040vmin%3B%0A%20%20height%3A%2040vmin%3B%0A%20%20background-color%3A%20canvastext%3B%0A%20%20color%3A%20canvas%3B%0A%20%20border%3A%20none%3B%0A%20%20border-radius%3A%2050%25%2050%25%3B%0A%20%20display%3A%20grid%3B%0A%20%20align-items%3A%20center%3B%0A%20%20justify-content%3A%20center%3B%0A%20%20text-decoration%3A%20none%3B%0A%20%7D%0A%20%26%3Afocus%20%2B%20a%20%7B%0A%20%20animation-name%3A%20run%3B%0A%20%7D%0A%7D%0A%40keyframes%20run%20%7B%0A%20from%20%7B%0A%20%20color%3A%20canvastext%3B%0A%20%20transform%3A%20scale(1)%3B%0A%20%20opacity%3A%20.5%3B%0A%20%20filter%3A%20blur(1vmin)%3B%0A%20%7D%0A%20to%20%7B%0A%20%20color%3A%20canvastext%3B%0A%20%20transform%3A%20scale(2)%3B%0A%20%20opacity%3A%20.9%3B%0A%20%20filter%3A%20blur(.1vmin)%3B%0A%20%7D%0A%7D%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22%23%22%20id%3D%22go%22%20tabindex%3D%22-1%22%3E%3C%2Fa%3E%0A%3Ca%20href%3D%22%23go%22%3EClick%20to%20animate.%3C%2Fa%3E https://myfonj.github.io/sandbox.html#%3C!doctype%20html%3E%...
- dunno7456 3y agoOr some Newtonian like in https://www.youtube.com/watch?v=n-txrCMvdms https://www.youtube.com/watch?v=n-txrCMvdms (9m47s)
- junetic 3y agoUsing tailwind. Animation should be slower and smoother now