CSS-渐变不透明度动画-元素显示然后执行动画

我有一个不透明度的淡入动画，它工作得很好，除了加载页面时显示元素，然后动画

这是我的CSS代码：

.header-wrap {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
}

下面是

关键帧

：

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

请帮忙，我做错了什么

我还尝试在我的元素中将不透明度设置为0，但所做的只是在动画之后不显示元素

.header-wrap {
    opacity: 0;
}

---

您应该将标题环绕的动画填充模式设置为“前进”，以便动画结束后不透明度保持为1

.标题包装应如下所示

.header-wrap {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

---

将

不透明度：0

添加到标题中，这样它就不会在加载时显示！然后添加

动画填充模式：forwards

，将动画中的lasts属性应用于标题

@-webkit关键帧fadeInLeft{
从{
不透明度：0；
-webkit转换：translatex（-10px）；
-moz变换：translatex（-10px）；
-o-变换：translatex（-10px）；
转换：translatex（-10px）；
}
到{
不透明度：1；
-webkit转换：translatex（0）；
-moz变换：translatex（0）；
-o变换：translatex（0）；
变换：translatex（0）；
}
}
@-moz关键帧fadeInLeft{
从{
不透明度：0；
-webkit转换：translatex（-10px）；
-moz变换：translatex（-10px）；
-o-变换：translatex（-10px）；
转换：translatex（-10px）；
}
到{
不透明度：1；
-webkit转换：translatex（0）；
-moz变换：translatex（0）；
-o变换：translatex（0）；
变换：translatex（0）；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
-webkit转换：translatex（-100px）；
-moz变换：translatex（-100px）；
-o变换：translatex（-100px）；
转换：translatex（-100px）；
}
到{
不透明度：1；
-webkit转换：translatex（0）；
-moz变换：translatex（0）；
-o变换：translatex（0）；
变换：translatex（0）；
}
}
.收割台包装{
不透明度：0；
-webkit动画名称：fadeInLeft；
-moz动画名称：fadeInLeft；
-o-animation-name:fadeInLeft；
动画名称：fadeInLeft；
-webkit动画持续时间：1s；
-moz动画持续时间：1s；
-o-动画-持续时间：1s；
动画持续时间：1s；
-webkit动画延迟：1s；
-moz动画延迟：1s；
-o-动画-持续时间：1s；
动画延迟：1s；
动画填充模式：正向；
}

标题

我找到的解决方案

收割台包装

.header-wrap {
opacity: 0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;

webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;   
-o-animation-fill-mode: forwards;     
-ms-animation-fill-mode: forwards;    
animation-fill-mode: forwards;

-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;

-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}

关键帧

@-webkit-keyframes fadeInLeft {
from {
    opacity:0;

}
to {
    opacity:1;
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -o-transform: translatex(0px);
    transform: translatex(0px);

    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;

    }
    to {
        opacity:1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;

    }
    to {
        opacity:1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);

    }
} 

---

通过在关键帧方法之前进行转换，并在标题换行中将opactity设置为0，并使用填充模式前进，它应该可以工作，在chrome上对我有效

哦，对不起，我刚刚编辑了我的帖子，也许这对你有效现在它根本不出现。