.modal-backdrop { -webkit-backface-visibility: hidden; } .modal-backdrop.zoom, .modal-backdrop.newspaper, .modal-backdrop.move-horizontal, .modal-backdrop.move-from-top, .modal-backdrop.unfold-3d, .modal-backdrop.zoom-out { opacity: 0; transition: opacity 0.4s ease; } .modal-backdrop.in { opacity: 0.5; } .modal-backdrop.unfold-3d { perspective: 500; } .modal.zoom .modal-dialog { opacity: 0; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transform: scale(0.6); } .modal.in .modal-dialog { opacity: 1; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; transform: scale(1); } .modal.fade.newspaper .modal-dialog, .modal.newspaper .modal-dialog { opacity: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s; transform: scale(0) rotate(500deg); } .modal.fade.newspaper.in .modal-dialog, .modal.in .modal-dialog { opacity: 1; transform: scale(1) rotate(0deg); } .modal.move-horizontal .modal-dialog { opacity: 0; transition: all 0.5s; transform: translateX(-50px); } .modal.in .modal-dialog { opacity: 1; transform: translateX(0); } .modal.move-from-top .modal-dialog { opacity: 0; transition: all 0.5s; transform: translateY(-100px); } .modal.in .modal-dialog { opacity: 1; transform: translateY(0); } .modal.unfold-3d .modal-dialog { opacity: 0; transition: all 0.5s ease-in-out; transform-style: preserve-3d; transform: rotateY(-60deg); } .modal.in .modal-dialog { opacity: 1; transform: rotateY(0deg); } .modal.fade.zoom-out .modal-dialog, .modal.zoom-out .modal-dialog { opacity: 0; transition: all 0.5s; transform: scale(1.3); } .modal.fade.zoom-out.in .modal-dialog, .modal.in .modal-dialog { opacity: 1; transform: scale(1); } .csstransforms3d .modal.unfold-3d .modal-dialog { transform: none; transform-origin: 50% 100%; transform: scale(0.7) rotate3d(-1, 1, 0, -60deg); } .csstransforms3d .modal.in .modal-dialog { transform: scale(1) rotate3d(-1, 1, 0, 0deg); }