Css 动画文本以错误的顺序设置动画

我使用animate.css在页面加载时设置文本动画。我正在延迟效果，但它正在显示文本，然后设置动画，看到了吗

您可以在此处看到正在运行的动画：

如果您需要更接近我的HTML和CSS：

@导入url（'https://fonts.googleapis.com/css?family=Pacifico');
.logotext{
颜色：柠檬黄；
字体大小：34px；
字体系列：“Pacifico”，草书；
}
.navbar默认值{
背景色：浅灰色！重要；
盒子阴影：0px 5px 0px limegreen！重要；
}
.navbar默认值.navbar nav>li>a{
颜色：白色！重要；
}
.navbar默认值.navbar nav>li>a:悬停，
.navbar默认值。navbar导航>li>a:焦点{
颜色：白色！重要；
}
李{
字体大小：20px；
}
.导航栏对吗{
右边填充：80px；
}
.hvr扫掠至顶部：之前{
背景：白鹭；
}
.容器流体{
填充：0px；
}
.aboutmediv{
背景色：黑色；
高度：900px；
}
.imagetextbig{
位置：绝对位置；
顶部：240px；
宽度：100%；
颜色：黄花；
字体大小：90px；
文本对齐：居中；
动画：幻灯片左1秒；
动画延迟：0.9秒；
}
.导航条固定顶部{
动画：滑入1s；
动画延迟：0.1s；
}
.imgtext2{
边缘顶部：100px；
动画：slideInRight 1s；
动画延迟：0.9秒；
}

尼迪戈夫





嗨，我是尼迪戈夫
这是我的网站

看看你的CSS，我想这是我们讨论的两个元素：

.imagetextbig { 
    position: absolute; 
    top: 240px; 
    width: 100%;
    color: goldenrod;
    font-size: 90px;
    text-align: center;
    animation: slideInLeft 1s;
    animation-delay: 0.9s;
}
.imgtext2{
    margin-top: 100px;
    animation: slideInRight 1s;
    animation-delay: 0.9s;
}

如果您希望先隐藏它们，然后从页面的侧面滑入，则有两个选项。第一个选项是更改CSS，使其从屏幕开始并在屏幕上设置动画。但是没有一个即插即用的解决方案，您可以直接使用animate.css动画并使其工作

所以我们可以做第二个选择，就是在页面加载时隐藏它们，然后在动画开始时让它们出现。在默认样式中使用

visibility:hidden

，以便在页面首次加载时隐藏元素

.imagetextbig { 
    position: absolute; 
    top: 240px; 
    width: 100%;
    color: goldenrod;
    font-size: 90px;
    text-align: center;
    animation: slideInLeft 1s;
    animation-delay: 0.9s;
    visibility: hidden; /*add this*/
}
.imgtext2{
    margin-top: 100px;
    animation: slideInRight 1s;
    animation-delay: 0.9s;
    visibility: hidden; /*add this*/
}

然后，在动画中，我们希望确保它们切换到

可见性：visible

，否则将设置不可见元素的动画

如果我们转到并检查其源代码，我们可以看到slideInLeft的动画如下所示：

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

---

换句话说，在动画开始时将元素设置为可见已经为您解决了。因此，只需在开始时向默认样式添加

可见性：hidden

。slideInRight动画类似于slideInLeft动画：它还在开始时设置可见性：可见。所以也没什么好担心的。

嗯，文本在页面加载时是动画的，你在回答自己的问题。将文本设置为visibility hidden，然后当页面加载使其可见时，我该怎么做john大师？