{"id":10055,"date":"2026-06-10T10:23:36","date_gmt":"2026-06-10T15:23:36","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10055"},"modified":"2026-06-10T10:23:37","modified_gmt":"2026-06-10T15:23:37","slug":"demystifying-the-view-transition-pseudo-tree","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/demystifying-the-view-transition-pseudo-tree\/","title":{"rendered":"Demystifying the View Transition Pseudo Tree"},"content":{"rendered":"\n

Every time a view transition is initiated, a pseudo-element is added to the HTML element for the duration of the view transition. This acts as a snapshot overlay across your entire page.<\/p>\n\n\n\n

Each pseudo-element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting, which makes it a little hard to see what\u2019s actually happening under the hood. This article breaks down each pseudo-element in the tree so you know exactly what to target when you need to customize things.<\/p>\n\n\n\n

The View Transition Pseudo Tree<\/h2>\n\n\n\n

All elements with a view-transition-name<\/code> CSS property will be added to the view transition pseudo tree every time a view transition is called<\/a>. By default, only the HTML tag gets a view-transition-name<\/code>, the root<\/code> view transition group is the same size as the HTML element and covers all interactive elements. <\/p>\n\n\n\n

This is why your website may not be interactive during a view transition!<\/p>\n\n\n\n

::view-transition
\u2514\u2500 ::view-transition-group(root)
  \u2514\u2500 ::view-transition-image-pair(root)
      \u251c\u2500 ::view-transition-old(root)
      \u2514\u2500 ::view-transition-new(root)<\/pre>\n\n\n\n
\"\"
You can see the pseudo-element tree in DevTools during a View Transition.<\/figcaption><\/figure>\n\n\n\n
The pseudo tree will get a view-transition-group<\/code> for every named element, those elements are separated from the root<\/code> view transition and put on top of it. The value of the view-transition-name<\/code> will be used in the view transition group and its children. See the screenshot above where the active view transition had view-transition-name: blob;<\/code>. <\/p>\n\n\n
\/* \n  Adding a view-transition-name separates the element \n  from the root view transition and puts it on top\n  in the view transition pseudo tree\n*\/<\/span>\n.header-image<\/span> {\n  view-transition-name<\/span>: header-image;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
::view-transition
\u2514\u2500 ::view-transition-group(root)
  \u2514\u2500 ::view-transition-image-pair(root)
      \u251c\u2500 ::view-transition-old(root)
      \u2514\u2500 ::view-transition-new(root)
\u2514\u2500 ::view-transition-group(header-image)
  \u2514\u2500 ::view-transition-image-pair(header-image)
      \u251c\u2500 ::view-transition-old(header-image)
      \u2514\u2500 ::view-transition-new(header-image)<\/pre>\n\n\n\n
::view-transition-group<\/code><\/h3>\n\n\n\n
The view-transition-group<\/code> pseudo-element is responsible for the animation of the position, size, and rotation, this is all generated and applied automatically.<\/p>\n\n\n\n