diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index 2f21d71..7df0c0d 100644
--- a/app/stylus/components/Me.styl
+++ b/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 {
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index a6567d6..5a9e762 100644
--- a/app/stylus/components/Peer.styl
+++ b/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 {
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index a9a58f8..dbc11ba 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -5,7 +5,6 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
-@import './keyframes';
 
 html {
 	height: 100%;
diff --git a/app/stylus/keyframes.styl b/app/stylus/keyframes.styl
deleted file mode 100644
index 9d200f7..0000000
--- a/app/stylus/keyframes.styl
+++ /dev/null
@@ -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;
-	}
-}
\ No newline at end of file