mdn · dipikabh · Sep 29, 2025 · Sep 17, 2025 · Sep 18, 2025 · Sep 18, 2025
@@ -0,0 +1,26 @@
+@view-transition {
+  navigation: auto;
+}
+
+@keyframes slide-from-right {
+  from {
+    transform: translateX(100vw);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  animation: none;
+}
+
+::view-transition-new(root) {
+  animation: slide-from-right 0.3s;
+}
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cross-document view transition example 2: Page 2</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="hobbies.css" />
+  </head>
+  <body class="hobbies">
+    <section>
+      <h1>🧶 My Hobbies</h1>
+      <p>
+        When I'm not busy napping, I love to play with yarn and chase laser
+        pointers. I'm also an avid bird watcher.
+      </p>
+      <p>
+        Thank you for your interest!
+        You can return to the <a href="index.html">homepage</a> now.
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,28 @@
+@view-transition {
+  navigation: auto;
+}
+
+@keyframes slide-to-right {
+  from {
+    transform: translateX(0);
+    z-index: 2;
+  }
+
+  to {
+    transform: translateX(100vw);
+    z-index: 2;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  animation: slide-to-right 0.3s;
+}
+
+::view-transition-new(root) {
+  animation: none;
+}
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cross-document view transition example 2: Page 1</title>
+    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body class="index">
+    <section>
+      <h1>🏡 Homepage</h1>
+      <p>
+        Hello, my name is Mrs. Whiskers. Welcome to my personal website!
+      </p>
+      <p>
+        <div>
+          Everyone needs a place on the web, even a cat.
+        </div>
+        <div>
+          If you're curious, you can find out more about my <a href="hobbies.html">hobbies</a>.
+        </div>
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,26 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui;
+  max-inline-size: 400px;
+  padding: 20px;
+  text-align: center;
+  margin: auto;
+  line-height: 1.5;
+
+  &.index {
+    background-color: oklch(0.9529 0.0444 332);
+  }
+
+  &.hobbies {
+    background-color: oklch(0.9588 0.0617 184.24);
+  }
+}
+
+a {
+  color: oklch(0.0867 0.0419 261.53);
+}