CSS

CSS: Setting An Attribute After Transition Is Done

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