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

@view-transition

Включает анимированные переходы между страницами одного сайта.

Синтаксис

@view-transition { navigation: auto; }

Параметры

Параметр	Тип	Описание
navigation	auto \| none	`auto` — анимировать переходы между страницами одного источника.

Примеры

Правило, которое включает переходы (оно должно быть и на старой, и на новой странице):

<style>
  @view-transition { navigation: auto; }
  body { font-family: sans-serif; }
</style>
 
<p>On a real site this rule, added to every page, makes navigation between pages crossfade smoothly.</p>
<p><a href="#">A link to another page of the same site</a></p>

Примечания

По умолчанию страницы плавно сменяют друг друга; элементы с одинаковым view-transition-name на обеих страницах перелетают с места на место. Работает в Chrome, Edge и Safari; в остальных браузерах страницы просто сменяются без анимации.

См. также

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

В учебнике

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

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