Setup base animation styles

src/resources/styles.ts

@@ -199,3 +199,23 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
+
+export const baseAnimationStyles = css`
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;

src/resources/theme/core.globals.ts

@@ -42,6 +42,14 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
+
+    --ha-animation-base-duration: 350ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --ha-animation-base-duration: 0ms;
+    }
   }
 `;