[Javascript] Layout > Paint > Composite

Layout: 

This step invovles determining the geometry of the page. The browser calculates where each element will be on the screen, considering factors like text size, line height, box size, etc. This process can be triggered by changes to an element's dimensions, position, display, float, overflow, and other properties. Changing the window size can also trigger a layout change.

 

Paint:

This Process is where the browser fills in pixels. It invovles drawing out text, colors, images, borders, and shadows, basically every visual aspect of the elements. Paint is triggered when you change visual properties, such as background color, border color, text color, box shadows, or background images.

 

Composite:

The final process is to layer the painted elements together in the correct order. This is particularly important when elements overlap, or when there are semitransparent elements. Compositing is triggered whenever an element needs to move, or if an element's opacity changes, or if an element is overlaid onto the current page (e.g, a modal or a popup).

 

Answer:

width: Layout > Paint > Composite

opacity: Composite

background-image: Paint > Composite

left: Layout > Paint > Composite

transform: Composite

 

opacity: element will be promoted to a new layer, browser just changes the layer opacity. (Depends on browsers)

.elm {
  opacity: 1;
}

.elm:hover {
  opacity: 0.3;
}

 

transform: element move / animate from one state to another state:

Element will be promoted to a new layer, then move the layer accordingly.

It doesn't really change the layout, because base layer doesn't change. So it just need to be composited

.elm {
  width: 200px;
}

.elm:hover {
  transform: translateX(50px);
}

Note: using translateXor translateYif you want to move the elements, don't use left / right, because `left / right` will cause layout change.