More animation stuff

static/sexy.css

@@ -133,6 +133,12 @@ a:hover {
 	flex-wrap: wrap;
 }
 
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
 .game-button {
 	user-select: none;
 	position: relative;
@@ -141,12 +147,29 @@ a:hover {
 	transform: scale(1, 1);
 }
 
+#game-button-stroll {
+	animation: fadein 1s;
+}
+
+#game-button-feast {
+	animation: fadein 1s;
+}
+
+#game-button-gorge {
+	animation: fadein 1s;
+}
+
+#game-button-satiate {
+	animation: fadein 1s;
+}
+
 .game-logo {
 	width: 40vh;
 	opacity: 0.5;
 }
 
 .game-button:hover {
+	transition: 0.2s;
 	transform: scale(1.25, 1.25);
 }
 

templates/index.html

@@ -9,22 +9,22 @@
             fen's games
         </div>
         <div class="flex-container">
-            <a href="https://stroll.crux.sexy" class="game-button">
+            <a href="https://stroll.crux.sexy" class="game-button" id="game-button-stroll">
                 <div class="game-title">stroll</div>
                 <img class="game-logo" src="/images/stroll-logo.png">
             </a>
             <div class="game-description">A macro/vore procedural game</div>
-            <a href="https://feast.crux.sexy" class="game-button">
+            <a href="https://feast.crux.sexy" class="game-button" id="game-button-feast">
                 <div class="game-title">feast</div>
                 <img class="game-logo" src="/images/feast-logo.png">
             </a>
             <div class="game-description">A vore-focused RPG</div>
-            <a href="https://gorge.crux.sexy" class="game-button">
+            <a href="https://gorge.crux.sexy" class="game-button" id="game-button-gorge">
                 <div class="game-title">gorge</div>
                 <img class="game-logo" src="/images/gorge-logo.png">
             </a>
             <div class="game-description">An idle/clicker vore game</div>
-            <a href="https://satiate.crux.sexy" class="game-button">
+            <a href="https://satiate.crux.sexy" class="game-button" id="game-button-satiate">
                 <div class="game-title">satiate</div>
                 <img class="game-logo" src="/images/satiate-logo.png">
             </a>