Articles Tagged

view transitions

The CSS ::view-transition-image-pair pseudo-element is part of the View Transitions API that lets us select the “before-and-after” snapshots in a view transition.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

The CSS ::view-transition-image-new pseudo-element is part of the View Transitions API that lets us select the “new” snapshot that is transitioned to in a view transition.

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

The CSS ::view-transition-image-old pseudo-element is part of the View Transitions API that lets us select the “before” snapshot in a view transition.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

The ::view-transition-group pseudo-element selects one or more containers that group the pieces of an individual view transition.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

See that transition-name identifier in the pseudo-element’s argument? That’s how we can select a particular view transition. View …

The CSS ::view-transition pseudo-element is the top-level — or “root” — containing all animated transitions defined as CSS view transitions on the page.

::view-transition {
  position: fixed;
  inset: 0;
}

The CSS view-timeline-name property allows us to identify and reference an element we want to animate based on its scroll position when it enters the visible area (i.e., scrollport) of a scroll container (also called the “source”).

.element {
  view-timeline-name: 

The CSS view-transition-name property uniquely identifies an element that can be used in a view transition.

card {
  view-transition-name: card-transition;
}

We give the element a name (i.e., <custom-ident) that we reference or set the property to none to …

@view-transition {
  navigation: auto;
}

That goes right in your stylesheet and it’s the most basic of basic view transitions. The effect is a cross-fade between two pages.

The Chrome team had initially released a meta tag we could …