use transforms to make the dialog smooooth

dist/css/bootstrap.css

@@ -3344,14 +3344,20 @@ button.close {
   overflow-y: scroll;
 }
 
-.modal.fade {
-  top: -25%;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
+.modal.fade .modal-dialog {
+  -webkit-transform: translate(0, -25%);
+      -ms-transform: translate(0, -25%);
+          transform: translate(0, -25%);
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+     -moz-transition: -moz-transform 0.3s ease-out;
+       -o-transition: -o-transform 0.3s ease-out;
+          transition: transform 0.3s ease-out;
 }
 
-.modal.fade.in {
-  top: 0;
+.modal.fade.in .modal-dialog {
+  -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+          transform: translate(0, 0);
 }
 
 .modal-dialog {

javascript.html

@@ -14,7 +14,7 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug
     </div>
 
     <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (using <code>bootstrap-*.js</code> original files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
+    <p>Plugins can be included individually (using bootstrap's individual <code>*.js</code> files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
 
     <div class="bs-callout bs-callout-danger">
       <h4>Do not attempt to include both.</h4>

less/mixins.less

@@ -120,6 +120,12 @@
   -webkit-transition-duration: @transition-duration;
           transition-duration: @transition-duration;
 }
+.transition-transform(@transition) {
+  -webkit-transition: -webkit-transform @transition;
+     -moz-transition: -moz-transform @transition;
+       -o-transition: -o-transform @transition;
+          transition: transform @transition;
+}
 
 // Transformations
 .rotate(@degrees) {

less/modals.less

@@ -25,11 +25,11 @@
   z-index: @zindex-modal-background;
 
   // When fading in the modal, animate it to slide down
-  &.fade {
-    top: -25%;
-    .transition(~"opacity 0.3s linear, top 0.3s ease-out");
+  &.fade .modal-dialog {
+    .translate(0, -25%);
+    .transition-transform(~"0.3s ease-out");
   }
-  &.fade.in { top: 0; }
+  &.fade.in  .modal-dialog { .translate(0, 0)}
 }
 
 // Shell div to position the modal with bottom padding