Improve animations

Switches animations from 'all' to only running on transform and
opacity.

src/styles/sass/ads-sass/bootstrap-overrides.scss

@@ -93,7 +93,7 @@ textarea[disabled] {
 
 .btn {
   border-radius: $border-radius-large;
-  transition: all, 0.5s;
+  transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
 .btn-success,

src/styles/sass/ads-sass/facets.scss

@@ -153,7 +153,7 @@
 //used with dropdown
 .swoop-enter {
   opacity: 0;
-  transition: all 0.3s ease-in;
+  transition: opacity 0.6s ease, transform 0.6s ease;
   transform: translate3d(0, -20%, 0);
 }
 .swoop-enter.swoop-enter-active {
@@ -162,7 +162,7 @@
 }
 .swoop-leave {
   opacity: 1;
-  transition: all 0.3s ease-in;
+  transition: opacity 0.6s ease, transform 0.6s ease;
   transform: translate3d(0, 0, 0);
 }
 .swoop-leave.swoop-leave-active {

src/styles/sass/ads-sass/general-components.scss

@@ -126,7 +126,7 @@
       text-decoration: none;
     }
   }
-  transition: all, 0.5s;
+  transition: opacity 0.6s ease, transform 0.6s ease;
 
   .dropdown-menu {
     li {

src/styles/sass/ads-sass/layout.scss

@@ -46,15 +46,15 @@ body {
     @media (max-width: $screen-md) {
       &-aside {
         transform: translateX(-100%);
-        transition: all 0.3s ease-out;
+        transition: opacity 0.6s ease, transform 0.6s ease;
 
         &.show {
           transform: none;
         }
       }
 
       &-content {
-        transition: all 0.3s ease-out;
+        transition: opacity 0.6s ease, transform 0.6s ease;
         &.full-width {
           margin-left: -300px;
         }

src/styles/sass/ads-sass/metrics.scss

@@ -24,7 +24,7 @@
 
 .s-metrics-table,
 .s-metrics-graph {
-  @media(min-width: $screen-sm-min) {
+  @media (min-width: $screen-sm-min) {
     display: inline-block;
     vertical-align: top;
     padding: 0 0 0 2%;
@@ -43,7 +43,7 @@
   table {
     width: 100%;
   }
-  @media(min-width: $screen-sm-min) {
+  @media (min-width: $screen-sm-min) {
     width: 33%;
   }
   th {
@@ -68,7 +68,7 @@
 .s-metrics-graph {
   //mostly for print considerations
   max-width: 700px;
-  @media(min-width: $screen-sm-min) {
+  @media (min-width: $screen-sm-min) {
     width: 60%;
   }
 }
@@ -89,8 +89,7 @@
   &:hover {
     border-bottom: 3px solid lighten($brand-primary-faded, 30%);
   }
-  transition: all,
-  .5s;
+  transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
 .s-graph-tab.active {
@@ -135,15 +134,15 @@
     display: inline-block;
   }
   rect {
-    opacity: .85;
-    transition: opacity .2s;
+    opacity: 0.85;
+    transition: opacity 0.2s;
     &:hover {
       opacity: 1;
     }
   }
   .line {
-    stroke-opacity: .85;
-    transition: stroke-opacity .2s;
+    stroke-opacity: 0.85;
+    transition: stroke-opacity 0.2s;
     &:hover {
       stroke-opacity: 1;
     }
@@ -178,7 +177,6 @@
   border-radius: 2px;
 }
 
-
 /* Creates a small triangle extender for the tooltip */
 
 .d3-tip:after {
@@ -188,12 +186,11 @@
   width: 100%;
   line-height: 1;
   color: rgba(0, 0, 0, 0.8);
-  content: "\25BC";
+  content: '\25BC';
   position: absolute;
   text-align: center;
 }
 
-
 /* Style northward tooltips differently */
 
 .d3-tip.n:after {

src/styles/sass/ads-sass/page-managers.scss

@@ -81,7 +81,7 @@ s-search-bar-motion is applied */
   //show in desktops
   @media (min-width: $screen-sm-min) {
     display: inline-block;
-    transition: all 0.5s ease-out;
+    transition: opacity 0.6s ease, transform 0.6s ease;
 
     &:hover {
       box-shadow: 1px 1px 5px darken($gray-light, 4%);

src/styles/sass/ads-sass/sidebar.scss

@@ -72,7 +72,7 @@ $sidenav-background: $body-bg;
 
 .s-nav {
   padding: 8px 0 8px 6%;
-  transition: all, 0.5s, ease-out;
+  transition: opacity 0.6s ease, transform 0.6s ease;
   border-left: 5px solid $sidenav-background;
   font-size: 16px;