Page transition — анимация между страницами. SPA — easy. Многостраничные — View Transitions API.
Виды
Fade, slide, scale, push/cover, crossfade.
Tools
SPA: Framer Motion, Vue Transition, Next.js, Nuxt.
Многостраничные
View Transitions API. PJAX/Turbo Drive. Astro.
View Transitions API
2024+. Chrome/Edge. document.startViewTransition.
Timing
200-400ms. Не 600+.
Easing
Ease-out. cubic-bezier.
Direction
Forward, back, drilling down.
Loading в transition
Skeleton, progress bar.
Initial load
Staggered fade-in. 100-200ms delay.
Performance
Transform, opacity, will-change.
Mobile
Native-like. iOS swipe back.
Accessibility
prefers-reduced-motion, aria-live.
SEO
SSR/SSG для SPA + transitions.
Ошибки
Медленно, нет feedback, performance, mobile gesture conflict.
Примеры
Apple, Stripe, Linear, Vercel.
Сайт.uz
Staggered fade, prefetch, View Transitions API. Bounce 12% (18% было).