​Как сделать плавные анимации при переходе между страницами?

view-transition — это CSS-директива для создания плавных анимаций перехода между страницами сайта.
Настроить переход можно в одно правило. Браузер применит дефолтную cross-fade анимацию:

@view-transition {
  navigation: auto;
}

Если нужно закастомить, можно добавить свою:

::view-transition-old(root) {
  animation: 0.3s ease-in-out both slideOut;
}

::view-transition-new(root) {
  animation: 0.3s ease-in-out both zoomIn;
}

Пара советов по использованию:

- Если у вас простой сайт и все переходы стандартизированы, удобно описать их в глобальном стилевом файле.
- Если хотите использовать разные переходы для разных страниц в иерархии, описывайте их в стилевых файлах соответствующих страниц.
- Переходы отдельных элементов подчиняются той же логике: общие для всех страниц — в глобальном стилевом файле, специфичные — рядом с местом использования.
- Заботьтесь о своих пользователях: не пичкайте красивостями пользователей, которым они не нужны, и проверяйте корректность анимаций на разных устройствах.

👉 @frontendInterview