Add view transition

Author: pepelsbey

src/layouts/page.njk

@@ -27,6 +27,7 @@
     <title>{{ title }}</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="view-transition" content="same-origin">
 
     <link rel="stylesheet" href="/styles/index.css">
 

src/styles/blocks/header/base.css

@@ -5,6 +5,8 @@
     top: 0;
     z-index: 2;
     background-color: var(--color-back-primary);
+    view-transition-name: header;
+    contain: layout;
 }
 
 /* Link */

src/styles/global/transitions.css

@@ -0,0 +1,37 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slide-from-right {
+    from {
+        transform: translateX(30px);
+    }
+}
+
+@keyframes slide-to-left {
+    to {
+        transform: translateX(-30px);
+    }
+}
+
+::view-transition-old(root) {
+    animation:
+        90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left
+    ;
+}
+
+::view-transition-new(root) {
+    animation:
+        210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right
+    ;
+}

src/styles/index.css

@@ -3,6 +3,7 @@
 @import 'global/fonts.css';
 @import 'global/box-model.css';
 @import 'global/focus.css';
+@import 'global/transitions.css';
 
 /* Colors */