kizu, 1 month ago

@yuanchuan This is great!

A nice piece of a puzzle; I can see how it could potentially be used for things like syncing different animations/transitions on the page, and maybe even doing the elusive distance-based length of a transition (though, in that case, we'd probably need something to first read the distance, like scroll-driven animations).

kizu, 1 month ago

@yuanchuan Also, it appears that Safari does not like the first example with the counter():

1. It blinks from 0 to its value; not sure what is causing this. It might be a bug worth reporting.

2. It seems to have a built-in limit on how often the ticks happen: in Chrome and Firefox it is smooth, in Safari it ticks by 50.

yuanchuan, 1 month ago

@kizu That's a strange bug, fixed by wrapping with a calc()

counter-reset: t calc(var(--t));

bramus, 27 days ago

@yuanchuan @kizu One downside: animating custom properties (currently) happens on the main thread, which is unfortunate.

https://www.bram.us/2023/02/01/the-gotcha-with-animating-custom-properties/