From 013b37c1f697cb77f9f38ab12aa5149a6c4cc3c3 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 27 Sep 2022 16:49:18 -0400
Subject: [PATCH] Animation timing

---
 src/layouts/index.html        |  6 +++---
 src/static/css/animations.css | 10 +++++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 6da408f..adefbee 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -24,8 +24,8 @@
 </style>
 
 <section class="hero-section">
-<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-1"></div>
-<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-2"></div>
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="gen-art-1"></div>
+<div class="gen-art animated-5 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">
@@ -35,7 +35,7 @@
     </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 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>
+        <p class="lead hero-subhead animated-25 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>
diff --git a/src/static/css/animations.css b/src/static/css/animations.css
index fa944b3..d3e3d6f 100644
--- a/src/static/css/animations.css
+++ b/src/static/css/animations.css
@@ -22,7 +22,7 @@
     }
 }
 
-.animated {
+.animated-5 {
     animation-duration: 1s;
     animation-delay: .5s;
     animation-fill-mode: both;
@@ -30,6 +30,14 @@
     -webkit-animation-fill-mode: both
 }
 
+.animated-25 {
+    animation-duration: 1s;
+    animation-delay: .25s;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both
+}
+
 .animatedFadeInUp {
     opacity: 0
 }