Modify Bootstrap Modal Transition

Question

After some digging about, I managed to find out that I could modify the transitions for Bootstrap modals with the following selector — .modal.fade .modal-dialog

I've managed to set it so that the slide effect is removed, leaving only the fade in.

But now I'm trying to slow the transition down a little bit. I've tried adding the transition-duration property and changing it to 5 seconds, but with no luck. The modal still fades in very fast:

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .5s ease-out;
       -o-transition:      -o-transform .5s ease-out;
          transition:         transform .5s ease-out;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
          transition-duration: 5;
}

Can anyone see what I'm doing wrong?

score 1 · Answer 1 · edited May 23 '17 at 11:59

The transitions at the top are .5s. This will be used instead of the transition-duration: 5; Also make sure thst the duration is in seconds.

Try this CSS:

    .modal.fade .modal-dialog {
      -webkit-transition: -webkit-transform 5s ease-out;/* if this is too slow, change it back to .5s */
         -moz-transition:    -moz-transform 5s ease-out;
          -ms-transition:     -ms-transform 5s ease-out;
           -o-transition:      -o-transform 5s ease-out;
              transition:         transform 5s ease-out;
      -webkit-transform: translate(0, 0); 
         -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
           -o-transform: translate(0, 0);
              transform: translate(0, 0);
      -webkit-transition-duration: 5s;
         -moz-transition-duration: 5s;
           -o-transition-duration: 5s;
              transition-duration: 5s;/* note that the seconds are added */ 
    }

Edit: See How can I change the speed of the fade for alert messages in Twitter Bootstrap? This will probably help you, since it helped me to fix this same problem with the fade animation of Bootstrap modals. I made a custom animation to fix my problem, but this would work out too.

.modal.fade .modal-dialog{
   -webkit-transition: opacity 1.25s linear;
      -moz-transition: opacity 1.25s linear;
       -ms-transition: opacity 1.25s linear;
        -o-transition: opacity 1.25s linear;
           transition: opacity 1.25s linear;
 }

oh I should have said I'd tried this too! I've just tried again now to be sure but it doesn't seem to affect the speed for some reason? Unless this bit is somehow controlled by a different selector maybe? — , Mar 19 '15 at 13:48
I have edited my answer. I had the same problem with the modals but I made a custom animation, since I didn't like the slide effect of the modal. — Hkidd, Mar 20 '15 at 12:50

Modify Bootstrap Modal Transition

1 Answers1

Linked