diff --git a/build/minified/modules/modal.js b/build/minified/modules/modal.js
index 46e5ce707..6f25290a0 100644
--- a/build/minified/modules/modal.js
+++ b/build/minified/modules/modal.js
@@ -171,29 +171,20 @@
             ;
             startPosition = finalPosition + settings.animationOffset;
             // set top margin as offset
-            if($.fn.popIn !== undefined) {
+            $modal
+              .css({
+                top: topCentering,
+                marginTop : finalPosition + 'px'
+              })
+            ;
+            if(settings.transition && $.fn.transition !== undefined) {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : finalPosition + 'px'
-                })
-                .popIn()
+                .transition(settings.transition, settings.duration)
               ;
             }
             else {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : startPosition + 'px'
-                })
-                .animate({
-                  opacity   : 1,
-                  marginTop : finalPosition + 'px'
-                }, (settings.duration + 300), settings.easing)
+                .fadeIn(settings.duration, settings.easing)
               ;
             }
             if( $otherModals.is(':visible') ) {
@@ -204,7 +195,7 @@
             }
             $.dimScreen({
               context  : settings.context,
-              duration : 0,
+              duration : 400,
               dim      : function() {
                 $(document)
                   .on('keyup.' + namespace, function(event) {
@@ -240,12 +231,18 @@
               .off('keyup.' + namespace)
             ;
             $.unDimScreen({
-              duration: 0,
+              duration: 4000,
               unDim: function() {
-                $modal
-                  .popOut(200)
-                ;
-                settings.unDim();
+                if(settings.transition && $.fn.transition !== undefined) {
+                  $modal
+                    .transition(settings.transition, settings.duration, settings.unDim)
+                  ;
+                }
+                else {
+                  $modal
+                    .fadeOut(settings.duration, settings.easing, settings.unDim)
+                  ;
+                }
               }
             });
           },
@@ -344,6 +341,8 @@
     hide            : function(){},
     show            : function(){},
 
+    transition      : 'scale',
+
     context         : 'body',
     opacity         : 0.8,
 
diff --git a/build/packaged/modules/modal.js b/build/packaged/modules/modal.js
index 46e5ce707..6f25290a0 100644
--- a/build/packaged/modules/modal.js
+++ b/build/packaged/modules/modal.js
@@ -171,29 +171,20 @@
             ;
             startPosition = finalPosition + settings.animationOffset;
             // set top margin as offset
-            if($.fn.popIn !== undefined) {
+            $modal
+              .css({
+                top: topCentering,
+                marginTop : finalPosition + 'px'
+              })
+            ;
+            if(settings.transition && $.fn.transition !== undefined) {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : finalPosition + 'px'
-                })
-                .popIn()
+                .transition(settings.transition, settings.duration)
               ;
             }
             else {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : startPosition + 'px'
-                })
-                .animate({
-                  opacity   : 1,
-                  marginTop : finalPosition + 'px'
-                }, (settings.duration + 300), settings.easing)
+                .fadeIn(settings.duration, settings.easing)
               ;
             }
             if( $otherModals.is(':visible') ) {
@@ -204,7 +195,7 @@
             }
             $.dimScreen({
               context  : settings.context,
-              duration : 0,
+              duration : 400,
               dim      : function() {
                 $(document)
                   .on('keyup.' + namespace, function(event) {
@@ -240,12 +231,18 @@
               .off('keyup.' + namespace)
             ;
             $.unDimScreen({
-              duration: 0,
+              duration: 4000,
               unDim: function() {
-                $modal
-                  .popOut(200)
-                ;
-                settings.unDim();
+                if(settings.transition && $.fn.transition !== undefined) {
+                  $modal
+                    .transition(settings.transition, settings.duration, settings.unDim)
+                  ;
+                }
+                else {
+                  $modal
+                    .fadeOut(settings.duration, settings.easing, settings.unDim)
+                  ;
+                }
               }
             });
           },
@@ -344,6 +341,8 @@
     hide            : function(){},
     show            : function(){},
 
+    transition      : 'scale',
+
     context         : 'body',
     opacity         : 0.8,
 
diff --git a/build/uncompressed/modules/modal.js b/build/uncompressed/modules/modal.js
index 46e5ce707..6f25290a0 100644
--- a/build/uncompressed/modules/modal.js
+++ b/build/uncompressed/modules/modal.js
@@ -171,29 +171,20 @@
             ;
             startPosition = finalPosition + settings.animationOffset;
             // set top margin as offset
-            if($.fn.popIn !== undefined) {
+            $modal
+              .css({
+                top: topCentering,
+                marginTop : finalPosition + 'px'
+              })
+            ;
+            if(settings.transition && $.fn.transition !== undefined) {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : finalPosition + 'px'
-                })
-                .popIn()
+                .transition(settings.transition, settings.duration)
               ;
             }
             else {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : startPosition + 'px'
-                })
-                .animate({
-                  opacity   : 1,
-                  marginTop : finalPosition + 'px'
-                }, (settings.duration + 300), settings.easing)
+                .fadeIn(settings.duration, settings.easing)
               ;
             }
             if( $otherModals.is(':visible') ) {
@@ -204,7 +195,7 @@
             }
             $.dimScreen({
               context  : settings.context,
-              duration : 0,
+              duration : 400,
               dim      : function() {
                 $(document)
                   .on('keyup.' + namespace, function(event) {
@@ -240,12 +231,18 @@
               .off('keyup.' + namespace)
             ;
             $.unDimScreen({
-              duration: 0,
+              duration: 4000,
               unDim: function() {
-                $modal
-                  .popOut(200)
-                ;
-                settings.unDim();
+                if(settings.transition && $.fn.transition !== undefined) {
+                  $modal
+                    .transition(settings.transition, settings.duration, settings.unDim)
+                  ;
+                }
+                else {
+                  $modal
+                    .fadeOut(settings.duration, settings.easing, settings.unDim)
+                  ;
+                }
               }
             });
           },
@@ -344,6 +341,8 @@
     hide            : function(){},
     show            : function(){},
 
+    transition      : 'scale',
+
     context         : 'body',
     opacity         : 0.8,
 
diff --git a/build/uncompressed/modules/search.css b/build/uncompressed/modules/search.css
index abe3ca9c0..bb420a57e 100644
--- a/build/uncompressed/modules/search.css
+++ b/build/uncompressed/modules/search.css
@@ -179,6 +179,7 @@
 .ui.search.loading .input .icon {
   background: url(../images/loader-mini.gif) no-repeat 50% 50%;
 }
+.ui.search.loading .input .icon:before,
 .ui.search.loading .input .icon:after {
   display: none;
 }
diff --git a/build/uncompressed/modules/transition.css b/build/uncompressed/modules/transition.css
index dfca81193..5991a3b83 100644
--- a/build/uncompressed/modules/transition.css
+++ b/build/uncompressed/modules/transition.css
@@ -158,23 +158,23 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
+  -webkit-animation-name: fadeUp;
+  -moz-animation-name: fadeUp;
+  -o-animation-name: fadeUp;
+  animation-name: fadeUp;
+}
+.ui.fade.down.transition.in {
   -webkit-animation-name: fadeDown;
   -moz-animation-name: fadeDown;
   -o-animation-name: fadeDown;
   animation-name: fadeDown;
 }
-.ui.fade.down.transition.in {
+.ui.fade.down.transition.out {
   -webkit-animation-name: fadeDown;
   -moz-animation-name: fadeDown;
   -o-animation-name: fadeDown;
   animation-name: fadeDown;
 }
-.ui.fade.down.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
-}
 /*--------------
       Scale
 ---------------*/
diff --git a/node/src/files/components/semantic/modules/modal.js b/node/src/files/components/semantic/modules/modal.js
index 46e5ce707..6f25290a0 100644
--- a/node/src/files/components/semantic/modules/modal.js
+++ b/node/src/files/components/semantic/modules/modal.js
@@ -171,29 +171,20 @@
             ;
             startPosition = finalPosition + settings.animationOffset;
             // set top margin as offset
-            if($.fn.popIn !== undefined) {
+            $modal
+              .css({
+                top: topCentering,
+                marginTop : finalPosition + 'px'
+              })
+            ;
+            if(settings.transition && $.fn.transition !== undefined) {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : finalPosition + 'px'
-                })
-                .popIn()
+                .transition(settings.transition, settings.duration)
               ;
             }
             else {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : startPosition + 'px'
-                })
-                .animate({
-                  opacity   : 1,
-                  marginTop : finalPosition + 'px'
-                }, (settings.duration + 300), settings.easing)
+                .fadeIn(settings.duration, settings.easing)
               ;
             }
             if( $otherModals.is(':visible') ) {
@@ -204,7 +195,7 @@
             }
             $.dimScreen({
               context  : settings.context,
-              duration : 0,
+              duration : 400,
               dim      : function() {
                 $(document)
                   .on('keyup.' + namespace, function(event) {
@@ -240,12 +231,18 @@
               .off('keyup.' + namespace)
             ;
             $.unDimScreen({
-              duration: 0,
+              duration: 4000,
               unDim: function() {
-                $modal
-                  .popOut(200)
-                ;
-                settings.unDim();
+                if(settings.transition && $.fn.transition !== undefined) {
+                  $modal
+                    .transition(settings.transition, settings.duration, settings.unDim)
+                  ;
+                }
+                else {
+                  $modal
+                    .fadeOut(settings.duration, settings.easing, settings.unDim)
+                  ;
+                }
               }
             });
           },
@@ -344,6 +341,8 @@
     hide            : function(){},
     show            : function(){},
 
+    transition      : 'scale',
+
     context         : 'body',
     opacity         : 0.8,
 
diff --git a/node/src/files/components/semantic/modules/search.css b/node/src/files/components/semantic/modules/search.css
index abe3ca9c0..bb420a57e 100644
--- a/node/src/files/components/semantic/modules/search.css
+++ b/node/src/files/components/semantic/modules/search.css
@@ -179,6 +179,7 @@
 .ui.search.loading .input .icon {
   background: url(../images/loader-mini.gif) no-repeat 50% 50%;
 }
+.ui.search.loading .input .icon:before,
 .ui.search.loading .input .icon:after {
   display: none;
 }
diff --git a/node/src/files/components/semantic/modules/transition.css b/node/src/files/components/semantic/modules/transition.css
index dfca81193..5991a3b83 100644
--- a/node/src/files/components/semantic/modules/transition.css
+++ b/node/src/files/components/semantic/modules/transition.css
@@ -158,23 +158,23 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
+  -webkit-animation-name: fadeUp;
+  -moz-animation-name: fadeUp;
+  -o-animation-name: fadeUp;
+  animation-name: fadeUp;
+}
+.ui.fade.down.transition.in {
   -webkit-animation-name: fadeDown;
   -moz-animation-name: fadeDown;
   -o-animation-name: fadeDown;
   animation-name: fadeDown;
 }
-.ui.fade.down.transition.in {
+.ui.fade.down.transition.out {
   -webkit-animation-name: fadeDown;
   -moz-animation-name: fadeDown;
   -o-animation-name: fadeDown;
   animation-name: fadeDown;
 }
-.ui.fade.down.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
-}
 /*--------------
       Scale
 ---------------*/
diff --git a/src/modules/modal.js b/src/modules/modal.js
index 46e5ce707..6f25290a0 100755
--- a/src/modules/modal.js
+++ b/src/modules/modal.js
@@ -171,29 +171,20 @@
             ;
             startPosition = finalPosition + settings.animationOffset;
             // set top margin as offset
-            if($.fn.popIn !== undefined) {
+            $modal
+              .css({
+                top: topCentering,
+                marginTop : finalPosition + 'px'
+              })
+            ;
+            if(settings.transition && $.fn.transition !== undefined) {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : finalPosition + 'px'
-                })
-                .popIn()
+                .transition(settings.transition, settings.duration)
               ;
             }
             else {
               $modal
-                .css({
-                  display   : 'block',
-                  opacity   : 0,
-                  top: topCentering,
-                  marginTop : startPosition + 'px'
-                })
-                .animate({
-                  opacity   : 1,
-                  marginTop : finalPosition + 'px'
-                }, (settings.duration + 300), settings.easing)
+                .fadeIn(settings.duration, settings.easing)
               ;
             }
             if( $otherModals.is(':visible') ) {
@@ -204,7 +195,7 @@
             }
             $.dimScreen({
               context  : settings.context,
-              duration : 0,
+              duration : 400,
               dim      : function() {
                 $(document)
                   .on('keyup.' + namespace, function(event) {
@@ -240,12 +231,18 @@
               .off('keyup.' + namespace)
             ;
             $.unDimScreen({
-              duration: 0,
+              duration: 4000,
               unDim: function() {
-                $modal
-                  .popOut(200)
-                ;
-                settings.unDim();
+                if(settings.transition && $.fn.transition !== undefined) {
+                  $modal
+                    .transition(settings.transition, settings.duration, settings.unDim)
+                  ;
+                }
+                else {
+                  $modal
+                    .fadeOut(settings.duration, settings.easing, settings.unDim)
+                  ;
+                }
               }
             });
           },
@@ -344,6 +341,8 @@
     hide            : function(){},
     show            : function(){},
 
+    transition      : 'scale',
+
     context         : 'body',
     opacity         : 0.8,
 
diff --git a/src/modules/search.less b/src/modules/search.less
index 6a91f6372..e334e492e 100755
--- a/src/modules/search.less
+++ b/src/modules/search.less
@@ -221,6 +221,7 @@
 .ui.search.loading .input .icon {
   background: url(../images/loader-mini.gif) no-repeat 50% 50%;
 }
+.ui.search.loading .input .icon:before,
 .ui.search.loading .input .icon:after {
   display: none;
 }
diff --git a/src/modules/transition.less b/src/modules/transition.less
index db83a3a37..5d6f6a615 100755
--- a/src/modules/transition.less
+++ b/src/modules/transition.less
@@ -182,10 +182,10 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
-  -webkit-animation-name: fadeDown;
-  -moz-animation-name: fadeDown;
-  -o-animation-name: fadeDown;
-  animation-name: fadeDown;
+  -webkit-animation-name: fadeUp;
+  -moz-animation-name: fadeUp;
+  -o-animation-name: fadeUp;
+  animation-name: fadeUp;
 }
 
 .ui.fade.down.transition.in {
@@ -195,10 +195,10 @@
   animation-name: fadeDown;
 }
 .ui.fade.down.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
+  -webkit-animation-name: fadeDown;
+  -moz-animation-name: fadeDown;
+  -o-animation-name: fadeDown;
+  animation-name: fadeDown;
 }
 
 /*--------------