animation tweaks

Author: shakyShane

special-pages/pages/onboarding/app/components/v3/Background.module.css

@@ -46,7 +46,8 @@
 .clouds {
     background-image: url("../../../public/assets/img/layer1.svg");
     background-position: top right;
-    animation-name: offscreen;
+    animation-name: offscreen-clouds;
+    animation-duration: 50s;
 
     @media (prefers-color-scheme: dark) {
         opacity: .1;
@@ -89,6 +90,7 @@
         display: none
     }
 }
+
 @keyframes offscreen {
     from {
         transform: translateX(100vw);
@@ -98,3 +100,14 @@
         transform: translateX(0vw);
     }
 }
+
+@keyframes offscreen-clouds {
+    from {
+        /* this accounts for clouds SVG having some 'whitespace' */
+        transform: translateX(calc(100vw - 400px));
+    }
+
+    to {
+        transform: translateX(0vw);
+    }
+}