CSS动画期间的z索引分层问题

我正试着从信封里拿出一张生动活泼的邀请函。我有我想要的大部分，但我遇到的问题是，当你“打开”信封时，邀请会在信封外面弹出一秒钟，然后再回到里面开始动画

我肯定这是一个z索引问题，和动画结合在一起，但我不确定从哪里开始寻找

我现在的位置：

身体{
字体系列：helvetica、ariel、san serif；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：0px；/*框的位置*/
填充底部：100px；
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
保证金：自动；
填充：0；
宽度：80%；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
.框架{
宽度：600px；
高度：350px；
利润率：250px自动0；
位置：相对位置；
背景#435d77；
边界半径：0 40px 40px；
}
#打开信封的按钮{
宽度：180px；
高度：30px；
位置：绝对位置；
z指数：311；
顶部：250px；
左：208px；
边界半径：10px；
颜色：#fff；
字号：26px；
填充：15px0；
边框：2倍实心#fff；
过渡：所有.3s易于输入输出；
}
#按钮\打开\信封：悬停{
背景：#FFf；
颜色：#081D3D；
转换：比例（1.1）；
光标：指针；
}
.留言{
位置：相对位置；
宽度：580px；
最小高度：300px；
高度：自动；
背景：#fff；
保证金：0自动；
顶部：30px；
盒影：0 0 5px 2px#333；
转换：2s易进易出；
过渡延迟：1.5s；
z指数：300；
}
.left、.right、.top{宽度：0；高度：0；位置：绝对；顶部：0；z索引：310；}
.左{
左边框：300px实心#081d3d；
边框顶部：160px实心透明；
边框底部：160px实心透明；
}
.对{
右边框：300px实心#081d3d；
边框顶部：160px实心透明；
边框底部：160px实心透明；；
左：300px；
}
.top{
右边框：300px实心透明；
边框顶部：200px实心#193e6e；
左边框：300px实心透明；
过渡：变换1s、边框1s、缓进缓出；
变换原点：顶部；
变换：旋转（0度）；
z指数：500；
}
.底部{
宽度：600px；
高度：190px；
位置：绝对位置；
背景：#072247；
顶部：160px；
边界半径：0 0 30px 30px；
z指数：310；
}
.打开{
变换原点：顶部；
变换：rotateX（180度）；
转换：转换.7s，边框.7s，z-索引.7s易入易出；
边框顶部：200px实心#2c3e50；
z指数：200；
}
.拉{
-webkit动画：消息\u动画2s 1轻松输入输出；
动画：消息\u动画2s 1缓进缓出；
-webkit动画延迟：.9秒；
动画延迟：.45秒；
过渡：1.5s；
过渡延迟：1s；
z指数：350；
}
@-webkit为消息动画设置关键帧{
0%{
变换：translatey（0px）；
z指数：300；
转换：1s易入易出；
}
50%{
转换：translatey（-340px）；
z指数：300；
转换：1s易入易出；
}
51%{
转换：translatey（-340px）；
z指数：350；
转换：1s易入易出；
}
100%{
变换：translatey（0px）；
z指数：350；
转换：1s易入易出；
}
}
@关键帧消息\u动画{
0%{
变换：translatey（0px）；
z指数：300；
转换：1s易入易出；
}
50%{
转换：translatey（-340px）；
z指数：300；
转换：1s易入易出；
}
51%{
转换：translatey（-340px）；
z指数：350；
转换：1s易入易出；
}
100%{
变换：translatey（0px）；
z指数：350；
转换：1s易入易出；
}
}
打开




邀请
你被邀请了
日期|时间
$（文件）
.ready（函数（）{
$（“.frame”）
。单击（函数（）{
$（“.top”）
.addClass（“打开”）；
$（“.message”）
.addClass（“pull”）；
})
});

这很好用。只需更改CSS

动画填充模式：向前用于pull类。在最终动画将应用于元素的位置，请查看参考以了解更多详细信息


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

参考文献：

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



基本上，您必须降低
.message.pull的z索引，并使用
anima保持动画的最终状态
.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 ### */  
}