/* ============================================================= View Transitions API https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API ============================================================= */ @view-transition { navigation: auto; } /* Cada página tiene un nombre de transición distinto para que el navegador pueda animarla de forma diferente en cada cambio */ :root { view-transition-name: root; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ::view-transition-old(root) { animation-name: vt-fade-out; } ::view-transition-new(root) { animation-name: vt-fade-in; } /* Personalización de elementos durante la transición */ ::view-transition-group(root) { animation-duration: 350ms; } ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; } /* Keyframes */ @keyframes vt-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* En navegadores sin soporte: no se aplica nada */ @supports not (view-transition-name: root) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Si el usuario prefiere reduced motion, desactivamos */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* Fallback: simulamos cross-fade en navegadores sin View Transitions usando una clase temporal en cuando se hace un click en un link */ body.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease; }