css 动画 translate3d 中断：动画之前

Question

我有以下问题，我在 div 元素上放置了动画，以便在打开时很好地向上滑动（它是一个模态框）：

@keyframes slideup {
    0% {
        opacity:0;
        transform:translate3d(0, 20px, 0);
    }
    100% {
        opacity:1;
        transform:translate3d(0, 0, 0);
    }
}

.modal.sign {
    top:10%;
    width:650px;
    left:calc(50% - 325px);
    animation: 1s slideup ease;
}

然后我在该元素的 :before 上放了动画：

@keyframes alpha {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.modal.sign[data-show="true"]:before {
    background:rgba(215, 215, 215, 0.2);
    animation: 1s alpha ease;
}

现在，当模式打开时，只有 div 元素正在动画，而 :before 只是在动画完成时显示，我可以说如果我将 translate 更改为 top 它可以正常工作，为什么会这样翻译不起作用？有没有可以解决的办法？

DEMO HERE

Answer 1

为 alpha 动画添加 1 秒延迟

animation: 1s 1s alpha ease;

然后它会在上滑动画完成后开始。

@keyframes slideup {
    0% {
        opacity:0;
        //top:calc(10% + 20px);
        transform:translate3d(0, 20px, 0);
    }
    100% {
        opacity:1;
        //top:10%;
        transform:translate3d(0, 0, 0);
    }
}

@keyframes alpha {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.demo {
    width:300px;
    height:200px;
    background:crimson;
    position:fixed;
    top:10%;
    left:calc(50% - 150px);
    animation: 1s slideup ease;
}

.demo2 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0,0.2);
    content:'';
    display:block;
    animation: 1s alpha ease;
}

<div class="demo"></div>
<div class="demo2"></div>