/* overlay at start */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); transform: translateX(-50px); } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; -webkit-transform: translateX(50px); -moz-transform: translateX(50px); transform: translateX(50px); }