Graceful transition for pop up modals

Enfold uses the lightbox of Magnific Popup from : Dmitry Semenov

on its api you can see how to get some animation on it: https://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

in general the animations are set there via custom-class.
Here you have some examples on animation: https://codepen.io/dimsemenov/pen/GAIkt

the only thing is that you had to transform the given css rules of a animation to your quick.css
f.e. i like the mfp-3d-unfold:

/* 
====== 3d unfold ======
*/

.mfp-3d-unfold {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-3d-unfold .mfp-content {
  perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
  opacity: 0;
  transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
  transform: rotateY(60deg);
  opacity: 0;
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
  opacity: 0;
}

And is set via child-theme functions.php by:

function add_lightbox_effect() { 
?>
<script type="text/javascript">
(function($) {
$(window).load(function(){
  $('.inline-popups').magnificPopup({
    delegate: 'a',
    removalDelay: 500,
    mainClass: 'mfp-3d-unfold',
    type:'inline',
    midClick: true,
  }); 
  $(document).on('click', '.popup-modal-dismiss', function (e) {  
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'add_lightbox_effect');

the popup-modal-dismiss thing is not needed for that – but if there is a button to go to f.e. an anchor link on the page – it closes the popup with that class.

you see that for that code a custom-class is set to a parent of the anchor link : inline-popups
but change it to whatever you like.

See here an example : https://webers-testseite.de/pureinstall/info/