2

I am using a bootstrap modal that slides in from the right side of the page. I would like to make the modal to slide in slower than its current speed but can't seem to be able to do it. I am only able to change the .fade class, but that only changes the fade opacity and not the slide.How do i make the modal slide in slower?

This is my modal html

<div class="modal fade slide right" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg pull-right" style="margin:0 ;padding:0 !important">
    <div class="modal-content">

    </div>
  </div>
</div><!-- .modal -->

and the css:

.modal.fade:not(.in).right .modal-dialog {
-webkit-transform: translate2d(125%, 0, 0);
transform: translate3d(125%, 0, 0);

}

Jobin Abraham
  • 31
  • 1
  • 2
  • 2
    I think you can find answer here: [http://stackoverflow.com/questions/10441281/how-can-i-change-the-speed-of-the-fade-for-alert-messages-in-twitter-bootstrap][1] [1]: http://stackoverflow.com/questions/10441281/how-can-i-change-the-speed-of-the-fade-for-alert-messages-in-twitter-bootstrap – MaGiO Jan 20 '15 at 14:26
  • Thanks for answer. The answer in the mentioned link only changes the fade opacity transitions. I want to change the slide-in duration of the modal, not the fade. – Jobin Abraham Jan 21 '15 at 07:09

1 Answers1

0

Setting the 125% values to 25% instead, will make the modal slide in at the same speed as the standard Bootstrap slide speed.

.modal.fade:not(.in).right .modal-dialog {
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
}
olimortimer
  • 1,373
  • 10
  • 23