Fix fade-out animation running on page load

app/stylus/components/Me.styl

@@ -27,14 +27,11 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
-			visibility: hidden;
 			opacity: 0;
-			animation: fade-out 0.3s;
+			transition: opacity 0.3s;
 
 			&.visible {
-				visibility: visible;
 				opacity: 1;
-				animation: fade-in 0.3s;
 			}
 			
 			> .button {

app/stylus/components/Peer.styl

@@ -41,14 +41,11 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
-			visibility: hidden;
 			opacity: 0;
-			animation: fade-out 0.3s;
+			transition: opacity 0.3s;
 			
 			&.visible {
-				visibility: visible;
 				opacity: 1;
-				animation: fade-in 0.3s;
 			}
 			
 			> .button {

app/stylus/index.styl

@@ -5,7 +5,6 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
-@import './keyframes';
 
 html {
 	height: 100%;

app/stylus/keyframes.styl

@@ -1,23 +0,0 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	to {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-@keyframes fade-out {
-	from {
-		opacity: 1;
-		visibility: visible;
-	}
-
-	to {
-		opacity: 0;
-		visibility: hidden;
-	}
-}