Performance and Smooth Motion
Learn why some animations feel silky and others feel janky, and why transform and opacity are usually the safest choices.
Step 1 of 4
Why transform and opacity are your safest defaults
When you animate transform and opacity, the browser can often update the element more cheaply than when you animate layout-heavy properties like width, height, top, or left.
That does not mean other properties can never be animated. It means that for common interface polish — hover lifts, fades, small entrances, presses, nudges — transform and opacity are usually the most reliable place to start if you want smooth motion.
Web Standard
Smooth animation is not just a luxury. Janky motion can make an interface feel broken, slow, or cheap even when the rest of the UI is correct.
Learn more on MDN