From fb27501a9f1a2f1a00fea21b35f180a7c329d126 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Mon, 26 Sep 2022 18:41:39 -0400
Subject: [PATCH] text-flicker entrace animation on the H1

---
 src/layouts/partials/head.html  |  1 +
 src/static/css/text-flicker.css | 48 +++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/static/css/text-flicker.css

diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index b3c9909..f0166d0 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -55,6 +55,7 @@
     <link rel="stylesheet" href="/css/footer.css">
     <link rel="stylesheet" href="/css/package-grid.css">
     <link rel="stylesheet" href="/css/buttons.css">
+    <link rel="stylesheet" href="/css/text-flicker.css">
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
diff --git a/src/static/css/text-flicker.css b/src/static/css/text-flicker.css
new file mode 100644
index 0000000..c00d585
--- /dev/null
+++ b/src/static/css/text-flicker.css
@@ -0,0 +1,48 @@
+
+h1{
+  animation: text-flicker 3s linear;
+  transition: 0.2s ease-out;
+}
+
+@keyframes text-flicker {
+  0% {
+    opacity:0.1;
+  }
+
+  2% {
+    opacity:1;
+  }
+  8% {
+    opacity:0.1;
+  }
+  9% {
+    opacity:1;
+  }
+  12% {
+    opacity:0.1;
+  }
+  20% {
+    opacity:1;
+  }
+  25% {
+    opacity:0.3;
+  }
+  30% {
+    opacity:1;
+  }
+
+  70% {
+    opacity:0.7;
+  }
+
+  72% {
+    opacity:0.2;
+  }
+
+  77% {
+    opacity:.9;
+  }
+  100% {
+    opacity:.9;
+  }
+}