SYSTEM ATLASЗагрузка материала

Переходы между состояниями документа

View Transitions

View Transitions API создаёт согласованную анимацию между старым и новым визуальным состоянием страницы или документа.

Простыми словами

Например, карточка из списка разворачивается в статью с сохранением визуального положения заголовка, а reduced-motion отключает эффект. Поэтому это учитывают при проектировании интерфейса - иначе пользователь тратит лишние усилия, ошибается или не понимает реакцию системы.

Пример от @Vibeclakr

Пример при разработке

Карточка из списка разворачивается в статью с сохранением визуального положения заголовка, а reduced-motion отключает эффект.

Это редакционный пример применения, а не часть определения или доказательство концепции.

Формальное определение

View Transitions API создаёт согласованную анимацию между старым и новым визуальным состоянием страницы или документа.

Механизм действия

API захватывает визуальные состояния, строит pseudo-elements и запускает CSS-анимацию после изменения DOM или навигации.

Пример в работе

Нерабочий подход

Внедрить «Переходы между состояниями документа» как формальную настройку, не проверив сценарий отказа и ограничение: Анимация не должна скрывать задержку или нарушать reduced-motion; поддержка зависит от браузера.

Системный подход

Применять «Переходы между состояниями документа» только для заявленной цели, проверять поведение на реальном контуре и сохранять наблюдаемый критерий результата.

Ограничения

Анимация не должна скрывать задержку или нарушать reduced-motion; поддержка зависит от браузера.

Источник

W3C CSS Working Group, “CSS View Transitions Module Level 1”, 2026.

Первоисточник