hero animated, feedback welcome

src/components/HeroSection/HeroSection.css

@@ -2,6 +2,24 @@
 
 :root {
   --desktopTitleMaxWidth: 625px;
+
+  --animationProperties: {
+    animation-name: animationTitle;
+    animation-duration: 0.5s;
+    animation-timing-function: ease-out;
+    -webkit-animation-fill-mode: forwards;
+
+    visibility:hidden;
+    opacity: 1;
+    position: relative;
+  }
+}
+
+/* Animation for the hero elements */
+
+@keyframes animationTitle {
+  0%    { visibility: hidden; opacity: 0; top: -20px; }
+  100%  { visibility: visible; opacity: 1; top: 0;}
 }
 
 .root {
@@ -23,6 +41,9 @@
   @apply --marketplaceHeroTitleFontStyles;
   color: var(--matterColorLight);
 
+  @apply --animationProperties;
+  animation-delay: 0.5s;
+
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
   }
@@ -40,6 +61,9 @@
   margin-bottom: 63px;
   margin-top: 0;
 
+  @apply --animationProperties;
+  animation-delay: 0.65s;
+
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
   }
@@ -55,6 +79,9 @@
   border-radius: 4px;
   flex-shrink: 0;
 
+  @apply --animationProperties;
+  animation-delay: 0.8s;
+
   @media (--viewportMedium) {
     display: none;
   }
@@ -76,6 +103,9 @@
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 
+  @apply --animationProperties;
+  animation-delay: 0.8s;
+
   @media (--viewportMedium) {
     display: block;
     width: 400px;

src/containers/LandingPage/LandingPage.css

@@ -4,6 +4,22 @@
 
 }
 
+@keyframes animationBorders36px {
+  0%    { border: 0px solid #FFF; }
+  100%  { border: 36px solid #FFF;}
+}
+
+@keyframes animationBorders24px {
+  0%    { border: 0px solid #FFF; }
+  100%  { border: 24px solid #FFF;}
+}
+
+@keyframes animationBordersRadius {
+  0%    { border-radius: 0px; }
+  100%  { border-radius: 4px; }
+}
+
+
 /* heroContainer gives the height for HeroSection */
 /* Safari has a bug with vw padding inside flexbox. Therefore we need an extra div (container) */
 .heroContainer {
@@ -13,6 +29,16 @@
 
   @media (--viewportMedium) {
     min-height: calc(100vh - var(--topbarHeightDesktop));
+
+    animation-name: animationBorders24px;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    -webkit-animation-fill-mode: forwards;
+    animation-delay: 1s;
+  }
+
+  @media (--viewportLarge) {
+    animation-name: animationBorders36px;
   }
 }
 
@@ -21,6 +47,13 @@
   justify-content: flex-end;
   padding-bottom: 98px;
 
+  animation-name: animationBordersRadius;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  -webkit-animation-fill-mode: forwards;
+  animation-delay: 1s;
+  border-radius: 0px;
+
   @media (min-width: 768px) {
     justify-content: center;
     padding-top: 60px;