Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS transform vs position

Can some please explain to me the difference in transitioning the positional left or right properties or the -transform: translateX(n), as the both seem to achieve the same thing yet can be applied independently. I understand about the possibility of hardware acceleration but that's dependent on implementation.

// psuedo code;  #box {     -transition-property: all;     -transition-duration: 1s; }  // javascript  box.style.transform = "translateX(200px)"; vs box.style.left = "200px"; 

What's the advantage of one over the other? Thanks,

p

like image 614
paulb Avatar asked Aug 18 '11 14:08

paulb


People also ask

Why is it better to use translate rather than position?

TLDR: Using transform: translate(x,y); greatly decreases paint times on elements with CSS transitions. However, position: absolute; top/left will be faster if used on elements without transitions. Why Moving Elements with translate is better than position absolute, top/left (Paul Irish):

What is the purpose of CSS transform?

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

What is position relative in CSS?

An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

What does translateX mean in CSS?

The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.


2 Answers

The drawing order of rendering layers is:

  • layout layer
  • paint layer
  • compositor layer

A redraw in a layer will trigger redraw in subsequent layers.

Changing left or margin will trigger a redraw in layout layer (which, in turn, will trigger redraws in the other two layers) for the animated element and for subsequent elements in DOM.

Changing transform will trigger a redraw in compositor layer only for the animated element (subsequent elements in DOM will not be redrawn).

The difference in performance (hence in frames per second or, in simple terms, in animation smoothness) is tremendous. Using the first technique will often result in jittery animations even on good machines (when the processor is busy), while the second will likely run smoothly even on systems with limited resources.

Another advantage of using transforms is compositor redraws are heavily optimized (animations to multiple elements result in one redraw for all), while changing layout layer will trigger a redraw after each change of each element.

For a more detailed explanation on rendering techniques and rendering performance I recommend Google's Web Fundamentals.

like image 74
tao Avatar answered Sep 20 '22 21:09

tao


Position is dependant on what the position is set to, transform works from the element itself. So you could see transform as being identical to position:relative;.

However, you can still use transform on an absolutely positioned element (to position it relatively without needing an additional element or resorting to margins), as well as transform being CSS3 so if you can use position instead you should.

like image 25
Kokos Avatar answered Sep 20 '22 21:09

Kokos