91 lines
2.1 KiB
CSS
91 lines
2.1 KiB
CSS
.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);
|
|
} |