Add skip animation prop

src/html/index.html.template

@@ -20,6 +20,21 @@
     <meta name="color-scheme" content="dark light" />
     <%= renderTemplate("_style_base.html.template") %>
     <style>
+      @keyframes fade-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      ::view-transition-group(launch-screen) {
+        animation-duration: var(--ha-animation-base-duration, 350ms);
+        animation-timing-function: ease-out;
+      }
+      ::view-transition-old(launch-screen) {
+        animation: fade-out var(--ha-animation-base-duration, 350ms) ease-out;
+      }
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
@@ -32,11 +47,28 @@
         }
       }
       #ha-launch-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        view-transition-name: launch-screen;
+        background-color: var(--primary-background-color, #fafafa);
+        z-index: 100;
+      }
+      @media (prefers-color-scheme: dark) {
+        #ha-launch-screen {
+          background-color: var(--primary-background-color, #111111);
+        }
+      }
+      #ha-launch-screen.removing {
+        opacity: 0;
       }
       #ha-launch-screen svg {
         width: 112px;

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;
+    }
   }
 `;
 

src/util/launch-screen.ts

@@ -1,10 +1,50 @@
 import type { TemplateResult } from "lit";
 import { render } from "lit";
 
+const removeElement = (
+  launchScreenElement: HTMLElement,
+  skipAnimation: boolean
+) => {
+  launchScreenElement.classList.add("removing");
+
+  if (skipAnimation) {
+    launchScreenElement.parentElement?.removeChild(launchScreenElement);
+    return;
+  }
+
+  const durationFromCss = getComputedStyle(document.documentElement)
+    .getPropertyValue("--ha-animation-base-duration")
+    .trim();
+  let timeout = parseFloat(durationFromCss);
+  if (isNaN(timeout)) {
+    if (durationFromCss.endsWith("ms")) {
+      timeout = parseFloat(durationFromCss.slice(0, -2));
+    } else if (durationFromCss.endsWith("s")) {
+      timeout = parseFloat(durationFromCss.slice(0, -1)) * 1000;
+    }
+  }
+  if (!isFinite(timeout) || timeout < 0) {
+    timeout = 0;
+  }
+
+  setTimeout(() => {
+    launchScreenElement.parentElement?.removeChild(launchScreenElement);
+  }, timeout);
+};
+
 export const removeLaunchScreen = () => {
   const launchScreenElement = document.getElementById("ha-launch-screen");
-  if (launchScreenElement) {
+  if (!launchScreenElement?.parentElement) {
-    launchScreenElement.parentElement!.removeChild(launchScreenElement);
+    return;
+  }
+
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      removeElement(launchScreenElement, false);
+    });
+  } else {
+    // Fallback: Direct removal without transition
+    removeElement(launchScreenElement, true);
   }
 };