Experiment with view transitions

1 files changed, 22 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index c920dc8..843e9da 100644
--- a/src/style.css
+++ b/src/style.css
@@ -30,6 +30,28 @@
 	}
 }
 
+@keyframes move-out {
+	from { transform: translateY(0%);    }
+	to   { transform: translateY(-100%); }
+}
+
+@keyframes move-in {
+	from { transform: translateY(100%); }
+	to   { transform: translateY(0%);   }
+}
+
+@view-transition {
+	navigation: auto;
+}
+
+::view-transition-old(root) {
+	animation: 0.4s ease-in both move-out;
+}
+
+::view-transition-new(root) {
+	animation: 0.4s ease-in both move-in;
+}
+
 @media (max-width: 750px) {
 	h1 { font-size: 2.0rem; }
 	h2 { font-size: 1.5rem; }