Portal.view.home.parts.BaseContainer: move the page fade-in animations here #5504

Author: tobiu

resources/scss/src/apps/portal/home/MainContainer.scss

@@ -2,51 +2,4 @@
     overflow-x      : hidden!important;
     scroll-behavior : smooth;
     scroll-snap-type: y mandatory;
-
-    @keyframes appear-left {
-        0% {
-            transform: translateX(-400%);
-            opacity  : 0;
-        }
-        90% {
-            opacity: .3;
-        }
-        100% {
-            transform: translateX(0);
-            opacity  : 1;
-        }
-    }
-
-    @keyframes appear-right {
-        0% {
-            transform: translateX(400%);
-            opacity  : 0;
-        }
-        90% {
-            opacity: .3;
-        }
-        100% {
-            transform: translateX(0);
-            opacity  : 1;
-        }
-    }
-
-    .portal-home-content-view {
-        &:not(:first-child) {
-            &:not(:last-child) {
-                animation-timeline       : view(block 100% -500%);
-                animation-fill-mode      : both;
-                animation-duration       : 1ms; /* Firefox requires this to apply the animation */
-                animation-timing-function: linear;
-
-                &:nth-child(even) {
-                    animation-name: appear-right;
-                }
-
-                &:nth-child(odd) {
-                    animation-name: appear-left;
-                }
-            }
-        }
-    }
 }

resources/scss/src/apps/portal/home/parts/BaseContainer.scss

@@ -2,6 +2,35 @@
     min-height       : 100%;
     scroll-snap-align: center;
 
+    @keyframes appear-left {
+        0%   {opacity: 0; transform: translateX(-400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    @keyframes appear-right {
+        0%   {opacity: 0; transform: translateX(400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    &:not(:first-child) {
+        &:not(:last-child) {
+            animation-timeline       : view(block 100% -500%);
+            animation-fill-mode      : both;
+            animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+            animation-timing-function: linear;
+
+            &:nth-child(even) {
+                animation-name: appear-right;
+            }
+
+            &:nth-child(odd) {
+                animation-name: appear-left;
+            }
+        }
+    }
+
     .neo-content {
         font-size: min(max(2.3vw, 16px), 30px);
     }