Entrance animation for generative art

src/layouts/index.html

@@ -41,8 +41,8 @@
 </style>
 
 <section class="hero-section">
-<div class="gen-art" id="gen-art-1"></div>
+<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-1"></div>
-<div class="gen-art" id="gen-art-2"></div>
+<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-2"></div>
 <!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">-->
   <div class="container hero-container">
     <div class="row">
@@ -52,11 +52,11 @@
     </div>
     <div class="row">
       <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
-        <p class="lead hero-subhead" style="margin-top:8px; margin-bottom: -9px;">The revolution is here. We’re calling on all open-source devs to authenticate their Github with tea.</p>
+        <p class="lead hero-subhead animated animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The revolution is here. We’re calling on all open-source devs to authenticate their Github with tea.</p>
       </div>
     </div>
   </div>
-  <div class="full-width-cta-container">
+  <div class="full-width-cta-container animated animatedFadeInUp fadeInUp">
    {{- partial "full-width-cta.html" . -}}
   </div>
   <div class="hero-bottom">

src/static/css/generative-art.css

@@ -1,3 +1,46 @@
+/* Animations */
+
+@keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-delay: .5s;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+    opacity: 0
+}
+
+.fadeInUp {
+    opacity: 0;
+    animation-name: fadeInUp;
+    -webkit-animation-name: fadeInUp;
+}
+
+
 @media only screen and (min-width: 1200px) {
 
   #gen-art-1{

src/static/css/text-flicker.css

@@ -6,7 +6,7 @@ h1{
 
 @keyframes text-flicker {
   0% {
-    opacity:0.1;
+    opacity:.1;
   }
 
   2% {