Use delay. Handy.
For instance, pull overlay’s z-index to top layer when it’s summoned, before it starts barging in, and dump it back to bottom when it’s done animating itself into vacuum.
.overlay {
left: -100%;
z-index: initial;
transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0.01s linear 0.5s;
/* when leaving: spend 0.5s moving left, then z-index to bottom */
&.overlay-on {
left: 0;
z-index: 9999;
transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0.01s;
/* when entering: z-index to top, and spend 0.5s moving right */
}
}
