Lightbox Animation

see: https://enfold.webers-webdesign.de/#portfolio

main part is – i think for you to slow down the transition between – maybe you try first only:

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}

___________________________________
– on my page i had :

.mfp-ready .mfp-figure {
  opacity: 0;
}

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}
.mfp-zoom-in.mfp-bg,
.mfp-zoom-in .mfp-preloader {
  opacity: 0;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;
}
.mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg,
.mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.85;
}
.mfp-zoom-in.mfp-removing .mfp-figure, .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg,
.mfp-zoom-in.mfp-removing .mfp-preloader {
    opacity: 0;
}
.mfp-iframe-scaler{ overflow: visible; /*so the close button is shown*/}
.mfp-zoom-out-cur { cursor: auto; }
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; }

the scale-factor is up to you – maybe a scale-factor nearby the 1 looks better

Yes – please give me a bit time to think about. What i have allready done is to combine animate.css : Link with the transition between the images. see here the galleries in the tabs: next Link

But i guess it will be hard to differ between in- and out-transition.

Edit: Well – this is not perfect – and the question remains whether it is worth the effort.
You have to write your own MagnificPopup script for it, and still drive css adjustments here and there. : https://enfold.webers-webdesign.de/#portfolio
I do not see where the fault is with closing the lightbox in a nice way.