HTML & CSS · Middle · Question 15 of 75

Why is transform: translate() often better than changing left on a position: absolute element for movement animations?

Explanation

Moving via transform doesn't affect flow or trigger reflow, so the animation is smoother. left can be animated, but it's more expensive. Both support percentages, but they're computed differently: translate uses the element's own size (hence the translate(-50%, -50%) centering trick), left uses the containing block.

Further reading

Problem with a question

HTML & CSS · Middle · question 15

Test yourself

Take the HTML & CSS · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.

Take this quiz