CSS-свойство @view-transition

CSS- свойство @view-transition — это современная CSS-директива, предназначенная для создания плавных анимаций перехода между страницами или состояниями сайта. Она позволяет реализовать визуальные переходы между разными представлениями (например, при навигации по ссылкам) без необходимости писать сложный JavaScript-код.

Как работает @view-transition

Базовый синтаксис:

@view-transition {
  navigation: auto;
}

• Значение auto включает стандартную анимацию перехода между страницами.
• Значение none отключает переходы (по умолчанию).

Суть работы заключается плавной смене старого и нового состояния страницы. Реализуется примерно так:

/*Анимация состояния "ухода" старой страницы*/
::view-transition-old(root) {
  animation: 1s transition-out 0s ease;
}
/*Анимация состояния "прихода" новой страницы*/
::view-transition-new(root) {
  animation: 1s transition-in 0s ease;
}
/*Настройка анимаций через keyframes*/
@keyframes transition-out {
  from {
    opacity: 1;
    translate: 0;
    rotate: 0;
  }
  to {
    opacity: 0;
    translate: -3rem -5rem;
    rotate: -10deg;
  }
}

@keyframes transition-in {
  from {
    opacity: 0;
    translate: 3rem 5rem;
    rotate: -10deg;
  }
  to {
    opacity: 1;
    translate: 0;
    rotate: 0;
  }
}

Но работать это будет если в <head> страниц добавить:

<meta name="view-transition" content="same-origin" />