add light animation to Dashboard modal appearance; use translate3d for speed

src/scss/_animation.scss

@@ -1,23 +1,9 @@
-// Animation
-
-@keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
-    transform: scale(.1) translate3d(-2000px, 0, 0);
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-  }
+@keyframes fadeIn {
+  from { opacity: 0;  }
+  to { opacity: 1;  }
 }
 
-.UppyAnimation-zoomOutLeft {
-  animation-name: zoomOutLeft;
-  animation-duration: 1s;
-  animation-fill-mode: both;
+@keyframes appear {
+  from { transform: translate3d(-50%, -70%, 0); opacity: 0; }
+  to { transform: translate3d(-50%, -50%, 0); opacity: 1; }
 }

src/scss/_dashboard.scss

@@ -7,9 +7,12 @@
 
 .uppy-Dashboard--modal[aria-hidden=true] {
   display: none;
-  // transform: translateY(-50%);
 }
 
+  .uppy-Dashboard--modal:not([aria-hidden='true']) > .uppy-Dashboard-inner {
+    animation: appear 300ms both;
+  }
+
 // Added to body to prevent the page from scrolling when Modal is open
 .uppy-Dashboard-isOpen {
   overflow: hidden;
@@ -325,12 +328,12 @@
   bottom: 0;
   left: 0;
   right: 0;
-  transform: translateY(-105%);
+  // transform: translateY(-105%);
+  transform: translate3d(0, -105%, 0);
   transition: transform 0.2s ease-in-out;
   will-change: transform;
   background-color: darken($color-white, 4%);
   box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
-  // padding: 15px;
   padding-top: 40px;
   overflow: hidden;
   z-index: $zIndex-4;
@@ -338,14 +341,10 @@
   .uppy-Dashboard--wide & {
     padding-top: 50px;
   }
-
-  // .uppy-Dashboard--modal & {
-  //   z-index: $zIndex-4;
-  // }
 }
 
 .uppy-DashboardContent-panel[aria-hidden=false] {
-  transform: none;
+  transform: translate3d(0, 0, 0);
 }
 
 // Progress bar placeholder
@@ -1012,7 +1011,8 @@
 //
 
 .uppy-DashboardFileCard {
-  transform: translateY(0);
+  // transform: translateY(0);
+  transform: translate3d(0, 0, 0);
   transition: all 0.25s ease-in-out;
   width: 100%;
   height: 100%;
@@ -1028,6 +1028,7 @@
 
 .uppy-DashboardFileCard[aria-hidden=true] {
   transform: translateY(-105%);
+  transform: translate3d(0, -105%, 0);
 }
 
 .uppy-DashboardFileCard-inner {
@@ -1093,3 +1094,6 @@
   vertical-align: middle;
   width: 78%;
 }
+
+
+