10 ms·
It won't stutter because the actual animation is done by the browser CSS engine. await is only used to build the non-blocking timeline: Think keyframes, not fr
by geenat 3y ago
It won't stutter because the actual animation is done by the browser CSS engine.
await is only used to build the non-blocking timeline: Think keyframes, not frames.
- SirHound 3y agoIt will stutter because if your browser is under heavy load then your async function will run when the browser is free to do so - not at the 1s mark as specified by your transition. If you instead build the keyframes up front and give them to WAAPI/CSS then you won’t encounter stutters. This is easily provable by adding some blocking JS into your code. Block the main thread for ten seconds after your first transition and see when that next await triggers. Your animation will run smoothly for 1 second and then the next chunk of your timeline won’t run for another 9.