diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index c39f71f5561..463b83f23a1 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -1,5 +1,6 @@
 // MIXINS
 @import "mixins/mixins";
+@import "mixins/animations";
 @import "mixins/buttons";
 @import "mixins/breakpoints";
 @import "mixins/grid";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 7c2c9037abc..7263e954783 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -207,6 +207,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $dark-4;
+$side-menu-opacity:		  0.97;
 
 // Pagination
 // -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 796154bc30e..ed086685601 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -162,6 +162,8 @@ $input-label-bg:	        	     $gray-5;
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
+$side-menu-opacity:		  0.97;
+
 
 // search
 $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 109c13f7e2b..75b9550d133 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -7,7 +7,7 @@
   top: 52px;
   left: 0;
   width: $side-menu-width;
-  background-color: $side-menu-bg;
+  background-color: rgba($side-menu-bg,$side-menu-opacity);
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   visibility: hidden;
@@ -65,15 +65,15 @@
         opacity: 0;
         top: 0px;
         left: $side-menu-width;
-        background-color: $side-menu-bg;
-        animation: dropdown-anim 100ms ease-in-out 150ms forwards;
+        background-color: rgba($side-menu-bg,$side-menu-opacity);
+        @include animation('dropdown-anim 100ms ease-in-out 100ms forwards');
         z-index: -9999;
       }
     }
   }
 }
 
-@keyframes dropdown-anim {
+@include keyframes(dropdown-anim) {
   0% {
     display: none;
     opacity: 0;
@@ -85,7 +85,7 @@
   }
   100% {
     opacity: 1;
-    transform: translate3d(0,0,0)
+    transform: translate3d(0,0,0);
   }
 }
 
diff --git a/public/sass/mixins/_animations.scss b/public/sass/mixins/_animations.scss
new file mode 100644
index 00000000000..ed21b266c26
--- /dev/null
+++ b/public/sass/mixins/_animations.scss
@@ -0,0 +1,25 @@
+@mixin keyframes($animation-name) {
+    @-webkit-keyframes #{$animation-name} {
+        @content;
+    }
+    @-moz-keyframes #{$animation-name} {
+        @content;
+    }  
+    @-ms-keyframes #{$animation-name} {
+        @content;
+    }
+    @-o-keyframes #{$animation-name} {
+        @content;
+    }  
+    @keyframes #{$animation-name} {
+        @content;
+    }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};      
+}
\ No newline at end of file