For anyone looking to use this, I recommend using this CSS before the closing body tag. It disables the fade effect for visitors who prefer reduced motion, and the old page fades out while the new one fades in. (I've got an optional rule that keeps my header in place while the rest of the content fades out/in)
@media (prefers-reduced-motion: no-preference) {
body > header {
view-transition-name: header;
}
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
animation: fade-in 0.3s ease;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
}