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

然后我把动画放在：该元素之前：

@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元素被动画化，而：在动画完成之前刚出现之前，我能说的是，如果我将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>

css animation translate3d break：在动画之前

1 个答案: