#437 - Smoothen splash screen animation.

maraf · Nov 23, 2022 · ec85d87 · ec85d87
1 parent a88f5e6
commit ec85d87
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 48 deletions.
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.css b/src/Money.Blazor.Host/wwwroot/css/site.css
@@ -492,40 +492,19 @@ h4 {
 .splash img {
   width: 192px;
   height: 192px;
-  transition: margin-left 0.5s linear 0.5s, width 0.5s, height 0.5s;
+  transition: opacity 0.5s, width 0.5s, height 0.5s;
 }
 .splash.animate {
   height: 56px;
   opacity: 0;
   margin-top: -60px;
 }
-.splash.animate .app-title {
+.splash.animate .app-title, .splash.animate img {
   opacity: 0;
 }
 .splash.animate img {
-  width: 60px;
-  height: 60px;
-  margin-left: calc(-100vw + 71px);
-}
-@media (min-width: 576px) {
-  .splash.animate img {
-    margin-left: -480px;
-  }
-}
-@media (min-width: 768px) {
-  .splash.animate img {
-    margin-left: -680px;
-  }
-}
-@media (min-width: 992px) {
-  .splash.animate img {
-    margin-left: -890px;
-  }
-}
-@media (min-width: 1200px) {
-  .splash.animate img {
-    margin-left: -1070px;
-  }
+  width: 56px;
+  height: 56px;
 }
 
 .loading-bar {

diff --git a/src/Money.Blazor.Host/wwwroot/css/site.min.css b/src/Money.Blazor.Host/wwwroot/css/site.min.css
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.scss b/src/Money.Blazor.Host/wwwroot/css/site.scss
@@ -540,6 +540,7 @@ h4 {
 }
 
 /* ------ SPLASH SCREEN ------------------------------------------------------------------------ */
+
 .splash {
     position: absolute;
     top: 0;
@@ -565,38 +566,21 @@ h4 {
     img {
         width: 192px;
         height: 192px;
-        transition: margin-left 0.5s linear 0.5s, width 0.5s, height 0.5s;
+        transition: opacity 0.5s, width 0.5s, height 0.5s;
     }
 
     &.animate {
         height: 56px;
         opacity: 0;
         margin-top: -60px;
 
-        .app-title {
+        .app-title, img {
             opacity: 0;
         }
 
         img {
-            width: 60px;
-            height: 60px;
-            margin-left: calc(-100vw + 71px);
-
-            @media (min-width: 576px) {
-                margin-left: -480px;
-            }
-
-            @media (min-width: 768px) {
-                margin-left: -680px;
-            }
-
-            @media (min-width: 992px) {
-                margin-left: -890px;
-            }
-
-            @media (min-width: 1200px) {
-                margin-left: -1070px;
-            }
+            width: 56px;
+            height: 56px;
         }
     }
 }