::view-transition-group – CSS: Cascading Style Sheets | MDN

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::view-transition-group CSS pseudo-element represents a single view transition group.

During a view transition, ::view-transition-group is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of ::view-transition, and has a ::view-transition-image-pair as a child.

::view-transition-group is given the following default styling in the UA stylesheet:

html::view-transition-group(*)
 
{
  
position
:
 absolute





;
  
top
:
 0
;
  
left
:
 0
;

  
animation-duration
:
 0.25s
;
  
animation-fill-mode
:
 both
;
}

By default, selected elements initially mirror the size and position of the ::view-transition-old pseudo-element representing the “old” view state, or the ::view-transition-new pseudo-element representing the “new” view state if there isn’t an “old” view state.

If there’s both an “old” and “new” view state, styles in the view transition style sheet animate this pseudo-element’s width and height from the size of the “old” view state’s border box to that of the “new” view state’s border box.

Note: View transition style sheet styles are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

In addition, the element’s transform is animated from the “old” view state’s screen space transform to the new view state’s screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.