view transition smooth animated site transitions #css

style.css

@view-transition {
  navigation: auto;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}

@keyframes slide-out {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}

::view-transition-old(root) {
  animation: 0.5s ease-in both fade-out;
}

::view-transition-new(root) {
  animation: 0.5s ease-in both fade-in;
}