Hacker News new | ask | show | jobs
by spartanatreyu 779 days ago
Isn't that just an animation curve in css?
1 comments
keepamovin 775 days ago
I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states.

I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/

link
spartanatreyu 773 days ago
Well I could replicate that example with an animation curve using only css:

https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100

But if you want each step's duration to be parameterizable then you'll need to reach for js, I'd recommend the Animation API.

link