CSSアニメーション中のZ-インデックスレイヤーの問題

Question

私はアニメーションの招待状を封筒から出そうとしています。私が欲しいものはほとんど持っていますが、私が取り組んでいる問題は、あなたが封筒を "開く"ときに、招待状が封筒の外に1秒間ポップしてから、アニメーションを開始してからです。

私はそれがアニメーションと組み合わされたZインデックスの問題だと確信していますが、どこから探し始めるべきかわかりません。私がでてる

：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

は、これが正常に動作します。プルクラスのCSS animation-fill-mode:forwards;を変更するだけでした。

.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; 
} 

参考文献：

1. Apply style after CSS animation
最後のアニメーションが要素に適用されます場合は最終的には、より詳細

Codepen Demo

CSSのための参照をチェック

Answer 2

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

基本的には、.message.pullのzインデックスを下げ、そして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 ### */ 
}