responding to feedback

src/demo-app/tabs/tabs-demo.scss

@@ -16,7 +16,7 @@
   .md-tab-header {
     background: #f9f9f9;
   }
-  md-tab-body {
+  .md-tab-body-content {
     padding: 12px;
   }
 }

src/lib/tabs/_tabs-common.scss

@@ -2,6 +2,8 @@
 
 $md-tab-bar-height: 48px !default;
 
+$md-tab-animation-duration: 500ms !default;
+
 // Mixin styles for labels that are contained within the tab header.
 @mixin tab-label {
   line-height: $md-tab-bar-height;
@@ -36,5 +38,5 @@ $md-tab-bar-height: 48px !default;
   position: absolute;
   bottom: 0;
   height: 2px;
-  transition: 500ms ease-out;
-}
+  transition: $md-tab-animation-duration $ease-in-out-curve-function;
+}

src/lib/tabs/tab-body.html

@@ -3,4 +3,4 @@
      (@position.start)="_onAnimationStarted($event)"
      (@position.done)="_onAnimationComplete($event)">
   <template portalHost></template>
-</div>
+</div>

src/lib/tabs/tab-group.scss

@@ -33,7 +33,7 @@ md-ink-bar {
   position: relative;
   overflow: hidden;
   display: flex;
-  transition: height 500ms $ease-in-out-curve-function;
+  transition: height $md-tab-animation-duration $ease-in-out-curve-function;
 }
 
 // Wraps each tab body 

src/lib/tabs/tabs.ts

@@ -300,10 +300,10 @@ export type MdTabBodyActiveState = 'left' | 'center' | 'right';
   templateUrl: 'tab-body.html',
   animations: [
     trigger('position', [
-      state('left', style({transform: 'translateX(-100%)'})),
-      state('center', style({transform: 'translateX(0%)'})),
-      state('right', style({transform: 'translateX(100%)'})),
-      transition('* => *', animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)')),
+      state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
+      state('center', style({transform: 'translate3d(0, 0, 0)'})),
+      state('right', style({transform: 'translate3d(100%, 0, 0)'})),
+      transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
     ])
   ]
 })