View-transition-name
Learn named transitions with view-transition-name.
The view-transition-name property
To give an element a transition identity, you use the view-transition-name property. Its value is a custom-ident; for example view-transition-name: card-1. The named element forms its own transition group during the transition.
Unnamed elements fade away inside the page's root transition. A named element moves independently from the root; a smooth transition is drawn between its old and new position.
Named transitions
Named transitions are most useful when an element moves between two views. For example, in a gallery, the thumbnail and the enlarged detail view share the same view-transition-name; on click the browser draws a smooth transition between the two views.
This bridges list and detail. Because the element carries the same name in both views, the browser treats it as the same element and smoothly animates its position and size.
Exercise Give the gallery card a transition name
Write a block for the .gallery-card selector. The block must contain the declaration view-transition-name: card-1.
Show example solution
/* card transition name */
.gallery-card {
view-transition-name: card-1;
}Test yourself
-
Write the transition name in the correct form
/* give the card a transition name */ .card { view-transition-name: ____; }Show answer
/* give the card a transition name */ .card { view-transition-name: gallery-card; } -
What happens if two elements on the same page share the same view-transition-name?
- Both transition separately
- Only the first element transitions
- The transition is skipped, not applied
- Both merge into one transition
Show answer
The transition is skipped, not applied — Correct. When more than one element has the same name, the browser skips the transition.
-
Match view-transition-name values
- view-transition-name
- Names an element for the transition
- none
- Removes the transition name
- root
- Reserved name for the whole page
- custom-ident
- Custom name value