3 ms·
Regardless of whether there is a reflow, translate() allows you to do subpixel animation [0]. It will always be smoother than animating CSS position [1]. [0] h
by aphextron 7y ago
Regardless of whether there is a reflow, translate() allows you to do subpixel animation [0]. It will always be smoother than animating CSS position [1].
[0] https://css-tricks.com/tale-of-animation-performance/ https://css-tricks.com/tale-of-animation-performance/
[1] https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ https://www.paulirish.com/2012/why-moving-elements-with-tran...
- ricardobeat 7y ago> It will always be smoother Once you're hitting 60fps there is no difference in smoothness regardless of method. But in reality, it looks better if you avoid subpixel values, as the image will flicker slightly; the frames not aligned with the pixel grid will suffer blur or distortion. Try setting speed to 0.1 in the example to see it wobble. The effect is noticeable even on hi-dpi screens. Not saying you should animate anything using position these days, CSS transforms are certainly the right tool.