fixed line position and animation (#303)

robyn3choi · web-flow · commit 2f53ffed2d83 · 2021-04-22T16:14:12.000-07:00
diff --git a/sections/do-whats-right-section/WhatsRight.module.css b/sections/do-whats-right-section/WhatsRight.module.css
@@ -1,6 +1,13 @@
 .whatsRightAnimateOnce:before {
   animation: whatsRightFirstLineAnimation 3.5s linear 0s 1 forwards;
 }
+
+@-moz-document url-prefix() {
+  .whatsRightAnimateOnce:before {
+    animation: whatsRightFirstLineAnimationFirefox 3.5s linear 0s 1 forwards;
+  }
+}
+
 .whatsRightAnimateOnce .whatsRightHeadingHighlight:after {
   animation: whatsRightLeftBranchAnimation 0.75s linear 3s 1 forwards;
 }
@@ -34,7 +41,24 @@
     height: 663px;
   }
   100% {
-    display: none;
+    background-color: transparent;
+  }
+}
+
+@keyframes whatsRightFirstLineAnimationFirefox {
+  0% {
+    background-color: #ff86c6;
+    height: 0;
+  }
+  80% {
+    background-color: #ff86c6;
+    height: 665px;
+  }
+  95% {
+    background-color: #ff86c6;
+    height: 665px;
+  }
+  100% {
     background-color: transparent;
   }
 }
diff --git a/sections/do-whats-right-section/index.js b/sections/do-whats-right-section/index.js
@@ -136,6 +136,13 @@ const Item = styled.div`
       content: '';
     }
 
+    @-moz-document url-prefix() {
+      :before,
+      :after {
+        top: 2px;
+      }
+    }
+
     /* horizontal pink line to left of each heading */
     :before {
       width: 50px;
