Changed timing a bit for smoother animation.

assets/css/main.css

@@ -21,6 +21,13 @@ main {
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
+  view-transition-name: main-page;
+  transition-property: opacity, display;
+  transition-duration: 1s;
+  opacity: 1;
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .main-page {
@@ -950,3 +957,32 @@ textfield {
     }
   }
 }
+
+@view-transition {
+  navigation: none;
+  animation: none;
+  
+}
+
+::view-transition-group(main-page) {
+  animation-timing-function: ease-out;
+}
+::view-transition-old(main-page) {
+  animation-name: fade-out;
+}
+
+::view-transition-new(main-page) {
+  animation-name: fade-in;
+}
+
+@keyframes fade-out {
+  0% { opacity: 1;}
+  50% { opacity: 0;}
+  100% { opacity: 0;}
+}
+
+@keyframes fade-in {
+  0% { opacity: 0;}
+  50% { opacity: 0;}
+  100% { opacity: 1;}
+}