update(backdrop,css): animate backdrop opacity instead of background-…

…color

Based on research by @paulflo150, backdrop should animate opacity
(instead of background-color) for GPU performance improvements.

BREAKING CHANGE: use `opacity` instead of `background-color`

Before:
```css
&.md-opaque.ng-leave {
  transition: background-color 400ms linear;
}
```

After:
```css
&.md-opaque {

  opacity: .48;

  &.ng-enter {
    opacity: 0;
  }
  &.ng-enter.md-opaque.ng-enter-active {
    opacity: .48;
  }
  &.ng-leave {
    opacity: .48;
    transition: opacity 400ms;
  }
  &.ng-leave.md-opaque.ng-leave-active {
    opacity: 0;
  }
}
```

src/components/backdrop/backdrop-theme.scss

@@ -1,27 +1,9 @@
 md-backdrop {
 
-  // - Animate background-color alpha only for `.md-opaque` stylings
-
   background-color: '{{background-900-0.0}}';
 
   &.md-opaque.md-THEME_NAME-theme {
-    background-color: '{{background-900-0.48}}';
-  }
-
-  &.md-opaque.md-THEME_NAME-theme.ng-enter {
-    background-color: '{{background-900-0.0}}';
-
-    &.md-opaque.md-THEME_NAME-theme.ng-enter-active {
-      background-color: '{{background-900-0.48}}';
-    }
-  }
-
-  &.md-opaque.md-THEME_NAME-theme.ng-leave {
-    //transition: background-color 400ms linear;
-
-    &.md-opaque.md-THEME_NAME-theme.ng-leave-active {
-      background-color: '{{background-900-0.0}}';
-    }
+    background-color: '{{background-900-1.0}}';
   }
 
 }

src/components/backdrop/backdrop.scss

@@ -1,5 +1,17 @@
+// !!Important - Theme-based Background-color can be configured in backdrop-theme.scss
+//             - Animate background-color opacityy only for `.md-opaque` styles
+
 md-backdrop {
+  transition: opacity 450ms;
+
+  position: absolute;
+  top:0;
+  bottom:0;
+  left: 0;
+  right: 0;
+
   z-index: $z-index-backdrop;
+
   &.md-menu-backdrop {
     position: fixed !important;
     z-index: $z-index-menu - 1;
@@ -18,25 +30,28 @@ md-backdrop {
     z-index: $z-index-sidenav - 1;
   }
 
-  opacity: 1;
-
-  // - Animate background-color alpha only for `.md-opaque` stylings
-  // !!Important - Theme-based Background-color and animations can be enabled in backdrop-theme.scss
-
-  transition: background-color 450ms $swift-ease-in-timing-function;
-
-  position: absolute;
-  top:0;
-  bottom:0;
-  left: 0;
-  right: 0;
 
   &.md-click-catcher {
     position: absolute;
   }
 
-  &.md-opaque.ng-leave {
-    transition: background-color 400ms linear;
+  &.md-opaque {
+
+    opacity: .48;
+
+    &.ng-enter {
+      opacity: 0;
+    }
+    &.ng-enter.md-opaque.ng-enter-active {
+      opacity: .48;
+    }
+    &.ng-leave {
+      opacity: .48;
+      transition: opacity 400ms;
+    }
+    &.ng-leave.md-opaque.ng-leave-active {
+      opacity: 0;
+    }
   }
 
 }