Try customizing your styling and put something like this animation in your scss:
.modal-dialog {
animation: slidein 0.5s ease-in forwards;
}
@keyframes slidein {
from {
left: 0;
}
to {
left: 35%;
}
}
Depending on the width of your screen and/or popup this won't put the popup exactly in the center of your screen, so you'll have to tinker with it, but you get the idea. Create the start and end situation in an @keyframes and use that to define your animation.
Edit: or try targeting the first child class of modal-dialog like this:
.modal-content {
animation: slidein 0.5s ease-in forwards;
}
@keyframes slidein {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}