Псевдоэлемент CSS `::view-transition`

Базовая поддержка Недавно стала доступна

Эта функция работает в последних версиях браузеров и на современных устройствах. Она может не работать в старых версиях браузеров и на старых устройствах. Функция доступна во всех браузерах с октября 2025 года.

::view-transition — CSS-псевдоэлемент, представляющий корневой элемент наложения переходов между представлениями. Он содержит все группы снимков переходов между представлениями и располагается поверх всего остального содержимого страницы.

Во время перехода между представлениями ::view-transition включается в дерево связанных псевдоэлементов, как описано в разделе Дерево псевдоэлементов переходов между представлениями. Это корневой узел дерева, у которого есть один или несколько дочерних элементов ::view-transition-group().

Для ::view-transition в таблице стилей UA заданы следующие стили по умолчанию:

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

Все псевдоэлементы ::view-transition-group() позиционируются относительно корневого элемента перехода между представлениями.

Синтаксис

::view-transition {
  /* ... */
}

Примеры

::view-transition {
  background-color: rgb(0 0 0 / 25%);
}

Спецификации

Спецификация
CSS View Transitions Module Level 1 # selectordef-view-transition

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`view-transition`	109	109	144	95	18	109	144	74	18	21.0	109	18

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::view-transition