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 */ } }