From c682c469487ff0a46c525a228e991f463634e93c Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Thu, 6 Oct 2022 18:25:17 +0100
Subject: [PATCH] better example splash screen.

---
 src/Web/Avalonia.Web.Sample/app.css | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/Web/Avalonia.Web.Sample/app.css b/src/Web/Avalonia.Web.Sample/app.css
index 04ea5bee19..27680f6e1a 100644
--- a/src/Web/Avalonia.Web.Sample/app.css
+++ b/src/Web/Avalonia.Web.Sample/app.css
@@ -4,12 +4,15 @@
 }
 
 #avalonia-splash {
-    position: absolute;
+    position: relative;
     height: 100%;
     width: 100%;
     color: whitesmoke;
     background: #171C2C;
     font-family: 'Nunito', sans-serif;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 #avalonia-splash a{
@@ -24,15 +27,23 @@
 }
 
 .splash-close {
-    animation: fadeOut 1s forwards;
+    animation: slide 0.5s linear 1s forwards;
 }
 
-@keyframes fadeOut {
-    from {
-        opacity: 1;
+@keyframes slide {
+    0% {
+        top: 0%;
     }
 
-    to {
+    50% {
+        opacity: 80%;
+    }
+
+    100% {
+        top: 100%;
+        overflow: hidden;
         opacity: 0;
+        display: none;
+        visibility: collapse;
     }
 }