如何使CSS动画延迟大于动画持续时间？

Question

我无法在网络上找到我的问题的答案。 这是我无法理解的大麻烦：为什么我不能在CSS代码中设置大于 animation-duration 属性的 animation-delay 属性。虽然我绝对可以，但动画开始工作不对。

以下是我的关键帧：

@keyframes transfom-welcome-button-in {
from {
    transform: translateY(-10px);
    opacity: 0;
}
to {
    transform: translateZ(0);
    opacity: 1;
}

}

这是我的按钮CSS代码：

.welcomeLayer .button {
    transform: translateZ(0);
    animation-name: transfom-welcome-button-in;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    animation-delay: 0.4s;
}

上面的代码工作正常，但如果我改变这样的代码。该按钮最初没有隐藏，动画以某种方式抽搐：

.welcomeLayer .button {
    opacity: 1;
    transform: translateZ(0);
    animation-name: transfom-welcome-button-in;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    animation-delay: 0.5s; /*0.6s, 0.7s,...,0.ns*/
}

为什么我无法将动画延迟设置为大于动画延迟 ???请帮忙！