z-index layering issue during CSS Animation

Question

I'm trying to make an animated invitation come out of an envelope. I have most of what I want, but the issue I'm running into is when you "open" the envelope, the invitation pops to the outside of the envelope for a second before going back inside and starting the animation.

I'm sure it's a z-index issue combined with the animation, but I'm not sure where to start looking.

Where I'm at: https://codepen.io/zackpyle/pen/JyxpbM

<style>
      body{
      font-family: helvetica, ariel ,san-serif;
    }
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 0px; /* Location of the box */
        padding-bottom: 100px;
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 80%;
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }


    .frame{
        width: 600px;
        height: 350px;
        margin: 250px auto 0;
        position: relative;
        background: #435d77;
        border-radius:0 0 40px 40px; 
    }
    #button_open_envelope{
        width: 180px;
        height: 30px;
        position: absolute;
        z-index: 311;
        top: 250px;
        left: 208px;
        border-radius: 10px;
        color: #fff;
        font-size: 26px;
        padding:15px 0; 
        border: 2px solid #fff;
      transition: all .3s ease-in-out;
    }
    #button_open_envelope:hover{
        background: #FFf;
        color: #081D3D;
        transform:scale(1.1);
        cursor: pointer;
    }
    .message{
        position: relative;
        width: 580px;
        min-height:300px;
        height: auto;
        background: #fff;
        margin: 0 auto;
        top: 30px;
        box-shadow: 0 0 5px 2px #333;
        transition:2s ease-in-out;
        transition-delay:1.5s;
        z-index: 300;
    }
    .left,.right,.top{width: 0; height: 0;position:absolute;top:0;z-index: 310;}
    .left{  
        border-left: 300px solid #081d3d;
        border-top: 160px solid transparent;
        border-bottom: 160px solid transparent;
    }
    .right{ 
        border-right: 300px solid #081d3d;
        border-top: 160px solid transparent;
        border-bottom: 160px solid transparent;;
        left:300px;
    }
    .top{   
        border-right: 300px solid transparent;
        border-top: 200px solid #193e6e;
        border-left: 300px solid transparent;
        transition:transform 1s,border 1s, ease-in-out;
        transform-origin:top;
        transform:rotateX(0deg);
        z-index: 500;
    }
    .bottom{
        width: 600px;
        height: 190px;
        position: absolute;
        background: #072247;
        top: 160px;
        border-radius:0 0 30px 30px;
        z-index: 310; 
    }

    .open{
        transform-origin:top;
        transform:rotateX(180deg);
        transition:transform .7s,border .7s,z-index .7s ease-in-out;
        border-top: 200px solid #2c3e50;
        z-index: 200;
    }
    .pull{
        -webkit-animation:message_animation 2s 1 ease-in-out;
        animation:message_animation 2s 1 ease-in-out;
        -webkit-animation-delay:.9s;
        animation-delay:.45s;
        transition:1.5s;
        transition-delay:1s;
        z-index: 350;
    }



    @-webkit-keyframes message_animation {
        0%{
            transform:translatey(0px);
            z-index: 300;
            transition: 1s ease-in-out;
        }
        50%{
            transform:translatey(-340px);
            z-index: 300;
            transition: 1s ease-in-out;
        }
        51%{
            transform:translatey(-340px);
            z-index: 350;
            transition: 1s ease-in-out;
        }
        100%{
            transform:translatey(0px);
            z-index: 350;
            transition: 1s ease-in-out;
        }
    }
    @keyframes message_animation {
        0%{
            transform:translatey(0px);
            z-index: 300;
            transition: 1s ease-in-out;
        }
        50%{
            transform:translatey(-340px);
            z-index: 300;
            transition: 1s ease-in-out;
        }
        51%{
            transform:translatey(-340px);
            z-index: 350;
            transition: 1s ease-in-out;
        }
        100%{
            transform:translatey(0px);
            z-index: 350;
            transition: 1s ease-in-out;
        }
    }
</style>


    <div class="frame">
      <div id="button_open_envelope" style="text-align: center;">
        Open
      </div>
      <div class="message" style="text-align: center;">
        <div>
          <br>
          <br>
          <h1>Invitation</h1>
          <h2>You're invited</h2>
          <h3>Date | Time</h3>
        </div>
      </div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="top"></div>
    </div>
  </div> 

<script>
$(document)
    .ready(function() {
        $('.frame')
            .click(function() {
                $('.top')
                    .addClass('open');
                $('.message')
                    .addClass('pull');
            })
    });
</script>

Answer 1

https://codepen.io/anon/pen/brzKRb

Basically you had to lower z-index of .message.pull, and stay the final state of animation with animation-fill-mode:forwards;

.pull{
    -webkit-animation:message_animation 2s 1 ease-in-out;
    animation:message_animation 2s 1 ease-in-out;
    -webkit-animation-delay:.9s;
    animation-delay:.45s;
    transition:1.5s;
    transition-delay:1s;
    /* ### Edits ### */
    z-index: 300;
    animation-fill-mode:forwards;  
    -webkit-animation-fill-mode:forwards;
    /* ### Edits ### */  
}

Answer 2

This works fine. Just had to change the CSS animation-fill-mode:forwards; for the pull class. Where the final animation will get applied to the element finally, check references for more details

Codepen Demo

CSS:

.pull{
    -webkit-animation:message_animation 2s 1 ease-in-out;
    animation:message_animation 2s 1 ease-in-out;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
    -webkit-animation-delay:.9s;
    animation-delay:.45s;
    transition:1.5s;
    transition-delay:1s;
    z-index: 300;
}

References:

1. Apply style after CSS animation