Reduced animation on startup (#1227)

* Reduced animation on startup * updated CSS
DevToys-app · Jun 18, 2024 · fb096f8 · fb096f8
1 parent 1ce0c0a
commit fb096f8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss b/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss
@@ -2,12 +2,18 @@
     0% {
         background-position: 0px 196px; // The height of the hero image
     }
+    100% {
+        background-position: 0px 150px;
+    }
 }
 
 @keyframes hero-bg-scrolling {
     0% {
         background-position: 0px 196px; // The height of the hero image
     }
+    100% {
+        background-position: 0px 150px;
+    }
 }
 
 .hero {
@@ -38,10 +44,12 @@
         transform: rotateX(15deg) rotateZ(-15deg) skewX(15deg);
         transform-style: preserve-3d;
         // Animation
-        -webkit-animation: hero-bg-scrolling 20s infinite;
-        animation: hero-bg-scrolling 20s infinite;
-        -webkit-animation-timing-function: linear;
-        animation-timing-function: linear;
+        -webkit-animation: hero-bg-scrolling 2s;
+        animation: hero-bg-scrolling 2s;
+        -webkit-animation-timing-function: cubic-bezier(.7,1,.8,1);
+        animation-timing-function: cubic-bezier(.7,1,.8,1);
+        -webkit-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
     }
 
     &-title {

diff --git a/src/app/dev/DevToys.Blazor/wwwroot/css/devtoys.g.css b/src/app/dev/DevToys.Blazor/wwwroot/css/devtoys.g.css