动画延迟工作不正常

Matin 发表于 Dev

早晨

我正在使用 css 动画。这是我的代码：

#logo-header {
    height: 240px;
    margin: 0 auto;
    animation:  var(--logo-header-time) ease-in-out 3s 1 logo-header;
}

body {
    font-family: WeHaveSomeFontsHere;
    --nav-load-time: 350ms;
    --names-header-time: 2s;
    --logo-header-time: 1s;
}

@keyframes logo-header {
    0% {
        transform: translateY(-100%);
        display: none;
    }
    100% {
        transform: translateY(0);
    }
}

现在我正在寻找的是动画在页面加载后立即开始延迟 3 秒，但徽标必须首先隐藏，然后在使用指定的 3 秒加载后突然从页面顶部缓慢下降动画片。我在这里看到的是，当您在开始时加载页面时可以看到徽标，然后在 3 秒后动画开始工作。没有人应该一开始就看到这个标志。它必须在加载页面 3 秒后出现。有人知道我在这里缺少什么吗？我将非常感谢您的帮助。

古维尔阿罗拉

为了在动画发生之前隐藏您的徽标，您需要animation-fill-mode: backwards;在#logo-header

#logo-header {
    height: 240px;
    margin: 0 auto;
    animation:  var(--logo-header-time) ease-in-out 3s 1 logo-header;
    animation-fill-mode: backwards;
}

body {
    font-family: WeHaveSomeFontsHere;
    --nav-load-time: 350ms;
    --names-header-time: 2s;
    --logo-header-time: 1s;
}

@keyframes logo-header {
    0% {
        transform: translateY(-100%);
        display: none;
    }
    100% {
        transform: translateY(0);
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。