Adjust scale in animation globally, fade up/down

src/definitions/modules/modal.less

@@ -35,6 +35,7 @@
   background: @background;
   border: @border;
   box-shadow: @boxShadow;
+  transform-origin: @transformOrigin;
 
   border-radius: @borderRadius;
   user-select: text;

src/themes/default/modules/modal.overrides

@@ -1,38 +1,3 @@
 /*******************************
          Theme Overrides
 *******************************/
-
-.ui.modal.scale.transition.in {
-  animation-name: modalScaleIn;
-}
-.ui.modal.scale.transition.out {
-  animation-name: modalScaleOut;
-}
-
-/* In */
-@keyframes modalScaleIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.8);
-    transform-origin: 50% 25%;
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-    transform-origin: 50% 25%;
-  }
-}
-
-/* Out */
-@keyframes modalScaleOut {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-    transform-origin: 50% 25%;
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.9);
-    transform-origin: 50% 25%;
-  }
-}

src/themes/default/modules/modal.variables

@@ -6,6 +6,7 @@
 @border: none;
 @zIndex: 1001;
 @borderRadius: @defaultBorderRadius;
+@transformOrigin: 50% 25%;
 @boxShadow:
   1px 3px 3px 0px rgba(0, 0, 0, 0.2),
   1px 3px 15px 2px rgba(0, 0, 0, 0.2)

src/themes/default/modules/transition.overrides

@@ -95,7 +95,7 @@
 
 .drop.transition {
   transform-origin: top center;
-  animation-duration: 500ms;
+  animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
@@ -229,7 +229,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateY(10%);
+    transform: translateY(5%);
   }
 }
 @keyframes fadeOutDown {
@@ -239,7 +239,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateY(-10%);
+    transform: translateY(-5%);
   }
 }
 @keyframes fadeOutLeft {
@@ -249,7 +249,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateX(10%);
+    transform: translateX(5%);
   }
 }
 @keyframes fadeOutRight {
@@ -259,7 +259,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateX(-10%);
+    transform: translateX(-5%);
   }
 }
 
@@ -339,11 +339,10 @@
   animation-name: scaleOut;
 }
 
-/* In */
 @keyframes scaleIn {
   0% {
     opacity: 0;
-    transform: scale(0.7);
+    transform: scale(0.8);
   }
   100% {
     opacity: 1;
@@ -359,10 +358,11 @@
   }
   100% {
     opacity: 0;
-    transform: scale(0.7);
+    transform: scale(0.9);
   }
 }
 
+
 /*--------------
       Fly
 ---------------*/