view-transition-name
Gives an element a name so that a view transition animates it separately from the rest of the page.
Syntax
view-transition-name: name;Values
| Parameter | Type | Description |
|---|---|---|
| name | ident | A unique name on the page. |
| none | keyword | The element is part of the whole-page snapshot (the default). |
Examples
The block flies to its new place and shape:
<style>
.box { view-transition-name: box; width: 80px; height: 80px; background: coral; }
.box.moved { margin-left: 160px; background: teal; border-radius: 50%; }
</style>
<button onclick="document.startViewTransition
? document.startViewTransition(() => box.classList.toggle('moved'))
: box.classList.toggle('moved')">Move</button>
<div class="box" id="box"></div>Notes
The name must be unique on the page at the moment of the transition. Transitions within one page (startViewTransition()) work in all current browsers; transitions between pages are enabled with @view-transition.
See also
- @view-transition — Turns on animated transitions between pages of the same site.
- animation — Runs a `@keyframes` animation on an element.
In the tutorial
- View Transitions — Smoothly changing page states — document.startViewTransition(), the view-transition-name property, the ::view-transition pseudo-elements and transitions between pages.