From 6eef5e58c114d853c96f42a24648ce9fb0b661f5 Mon Sep 17 00:00:00 2001
From: Squirrel-314 <schoolarlybay@gmail.com>
Date: Sat, 16 Jan 2021 17:45:40 -0500
Subject: [PATCH] Finished Gold Rush Animations!

---
 index.html |  2 +-
 styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 40234e2..005ffd8 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,7 @@
          <div class="text">
             <br>
             <h1>Gold Rush!</h1>
-            <p class="about-gold">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
+            <p class="about-gold gold-text">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
          </div>
       </div>
       <div class="block" id="coming-soon">
diff --git a/styles.css b/styles.css
index 19a8746..d1bf977 100644
--- a/styles.css
+++ b/styles.css
@@ -355,7 +355,7 @@ Gold Rush
 }
 
 #gold-rush:hover h1 {
-   animation: show-text 1.2s 2 forwards;
+   animation: show-text 1.2s 3 forwards;
 }
 
 @keyframes show-text {
@@ -367,6 +367,53 @@ Gold Rush
    }
 }
 
+.gold-text {
+   animation: bounce-out 3s ease-in forwards;
+   transform: translate(1000px, 500px);
+   margin: auto;
+   transition: 0.8s;
+}
+
+#gold-rush:hover .gold-text {
+   animation: bounce-in 3s ease-in forwards;
+}
+
+@keyframes bounce-in {
+   0% {
+      transform: translateX(500px) translateY(-80px) scale(0);
+      width: 500px;
+      opacity: 0.2;
+   }
+   75% {
+      transform: translateX(200px) translateY(80px) scale(0.8);
+      width: 500px;
+      opacity: .8;
+   }
+   100% {
+      transform: translate(0, 0) scale(1);
+      width: 500px;
+      opacity: 1;
+   }
+}
+
+@keyframes bounce-out {
+   0% {
+      transform: translate(0, 0) scale(1);
+      width: 500px;
+      opacity: 1;
+   }
+   25% {
+      transform: translateX(200px) translateY(80px) scale(0.8);
+      width: 500px;
+      opacity: .8;
+   }
+   100% {
+      transform: translateX(500px) translateY(-80px) scale(0);
+      width: 500px;
+      opacity: 0.2;
+   }
+}
+
 /*==================================================
 Coming Soon!
 ==================================================*/