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" />
