Scale, Fade and Translate Bootstrap Modal

By Hawkee on Dec 08, 2014

It's quite easy to change the way a Bootstrap modal appears. The basic premise is to replace the .modal.fade and classes. You can use any number of transformations and transitions. For this example I'm growing and fading the modal in from below. This is all the CSS you need to modify your vanilla Bootstrap modals.

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
} .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;

Feel free to play with the different transformations to get the effect you're looking for.


See the Pen ogbqjV by Scott Aikin (@Hawkee) on CodePen.


Sign in to comment.
feuer81   -  Oct 18, 2015

maybe js must run?

feuer81   -  Oct 18, 2015

It does not work for me ((

Hawkee  -  Oct 18, 2015

Does the demo work? Could you be including this before your Bootstrap include?

nebojsab  -  Jun 30, 2016

Works like a charm!

max_blue  -  Aug 08, 2016

See the Pen Bootstrap Modal Animation With Animate.css by Nunaram Hembram (@max_blue) on CodePen.

rolandixor  -  Mar 19, 2017

Turns out I was wrong! It does work.

Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.