diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 4f3504348..47f7c89f3 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -506,50 +506,59 @@ p.hint {
  * show-menu: Animation for showing the menu
  */
 @keyframes show-menu {
-    from { left: -320px; }
-    to   { left: 0; }
+    from { left: -320px; opacity: 0;}
+    to   { left: 0;      opacity: 1;}
 }
 @-moz-keyframes show-menu {
-    from { left: -320px; }
-    to   { left: 0; }
+    from { left: -320px; opacity: 0;}
+    to   { left: 0;      opacity: 1;}
 }
 @-webkit-keyframes show-menu {
-    from { left: -320px; }
-    to   { left: 0; }
+    from { left: -320px; opacity: 0;}
+    to   { left: 0;      opacity: 1;}
 }
 
 /**
  * hide-menu: Animation for hiding the menu
  */
 @keyframes hide-menu {
-    from { left: 0; }
-    to   { left: -320px; }
+    from { left: 0;      opacity: 1;}
+    to   { left: -320px; opacity: 0;}
 }
 @-moz-keyframes hide-menu {
-    from { left: 0; }
-    to   { left: -320px; }
+    from { left: 0;      opacity: 1;}
+    to   { left: -320px; opacity: 0;}
 }
 @-webkit-keyframes hide-menu {
-    from { left: 0; }
-    to   { left: -320px; }
+    from { left: 0;      opacity: 1;}
+    to   { left: -320px; opacity: 0;}
 }
 
 #menu {
     overflow: auto;
     position: fixed;
     top: 0;
-    left: -320px;
     bottom: 0;
     max-width: 100%;
     width: 320px;
     background: #EEE;
-    box-shadow: inset -1px 0 2px white, 1px 0 2px black; 
+    box-shadow: inset -1px 0 2px white, 1px 0 2px black;
 }
 
 #menu .content {
     padding: 1em;
 }
 
+#menu, #menu.closed {
+    left: -320px;
+    opacity: 0;
+}
+
+#menu.open {
+    left: 0px;
+    opacity: 1;
+}
+
 #menu.closed {
     animation-name: hide-menu;
     animation-timing-function: linear;
@@ -557,7 +566,6 @@ p.hint {
     -webkit-animation-name: hide-menu;
     -webkit-animation-timing-function: linear;
     -webkit-animation-duration: 0.03125s;
-    left: -320px;
 }
 
 #menu.open {
@@ -567,5 +575,4 @@ p.hint {
     -webkit-animation-name: show-menu;
     -webkit-animation-timing-function: linear;
     -webkit-animation-duration: 0.03125s;
-    left: 0px;
 }