Справочник HTML & CSS

view-transition-name

Даёт элементу имя, чтобы переход между состояниями анимировал его отдельно от остальной страницы.

Синтаксис

view-transition-name: name;

Значения

Параметр	Тип	Описание
name	ident	Уникальное на странице имя.
none	keyword	Элемент входит в общий снимок страницы (по умолчанию).

Примеры

Блок перелетает на новое место и меняет форму:

<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>

Примечания

Имя должно быть уникальным на странице в момент перехода. Переходы внутри одной страницы (startViewTransition()) работают во всех актуальных браузерах; переходы между страницами включаются через @view-transition.

См. также

@view-transition — Включает анимированные переходы между страницами одного сайта.
animation — Запускает на элементе анимацию из `@keyframes`.

В учебнике

View Transitions — Плавная смена состояний страницы — document.startViewTransition(), свойство view-transition-name, псевдоэлементы ::view-transition и переходы между страницами.

Спасибо, что читаете!