diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index dcc62d5..142394e 100644
--- a/app/stylus/components/Room.styl
+++ b/app/stylus/components/Room.styl
@@ -179,13 +179,13 @@
 
 .room-controls {
 	visibility: hidden;
-	animation: fade-out 0.5s;
+	animation: fade-out 0.3s;
 	opacity: 0;
 
 	&.visible {
 		visibility: visible;
 		opacity: 1;
-		animation: fade-in 0.5s;
+		animation: fade-in 0.3s;
 	}
 }
 
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index 5e67e46..fa63dee 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -5,6 +5,7 @@ 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
new file mode 100644
index 0000000..f6444c9
--- /dev/null
+++ b/app/stylus/keyframes.styl
@@ -0,0 +1,20 @@
+@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