Your browser then calculates which CSS rules apply to which elements based on matching selectors. Once these rules are known, the final styles for each element can be calculated.
3. Layout
Your browser then starts to determine the shape and positioning of the elements, calculating the geometry of those elements.
Changes to the geometric properties such as width and height, left and right all trigger layout operations. It’s important to realise that animating an element’s position can affect the geometry of others, meaning your browser needs to check all elements, and reflow the page, which can be expensive. Affected areas then need to be repainted and the finalised elements composited back together. For instance, when you animate an element with a container, be wary of changing the child elements that live on that container too. In general, in your transition, it is better to refrain from animating properties that trigger these layout operations, which can be costly and result in a sub-par performance for your CSS transition.
4. Paint
Painting is the process by which your browser fills in pixels into different layers, drawing out text, colors, images, and borders that are then composited to a screen.
Triggering a paint property in your CSS transition is not recommended, as it can be the most expensive part of the Pixel Pipeline. This can cause all layers to change, necessitating re-painting which is particularly expensive for mobile devices that don’t have the same memory or CPU power as desktops. To optimise your transition experience, the browser should ensure that the animated CSS doesn’t cause a repaint.
5. Composite