Html CSS动画延迟对fadeIn效果不起作用。无论我将延迟设置为什么，动画都会立即开始

基本上就是标题所说的。我试图让这个div在页面加载后4秒左右出现，但它却立即出现。它正在进行淡入淡出动画（持续2秒），但该动画立即开始

以下是HTML：

.abouttext{
文本对齐：居中；
/*颜色：白色；已删除用于代码段演示*/
宽度：80%；
左边距：10%；
保证金权利：10%；
浮动：对；
}
#阿布通{
边缘顶部：10px；
动画：FadeinEase2s；
动画延迟：5s；
-webkit动画：fadeinease2s；
-moz动画：fadeinease2s；
-o动画：fadeinease2s；
-ms动画：fadeIn ease 2s；
z指数：0；
不透明度：0；
动画填充模式：正向；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-o-关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-ms关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}

你好

当您为不同的浏览器使用前缀，并且它们在原始

动画之后，浏览器将使用它们的前缀动画（例如，使用
-webkit
的浏览器将预期
-webkit动画延迟
）

您可以使用所有单独的前缀添加
动画持续时间
，或者只需在
动画
中使用
动画延迟
：


\aboutone{
文本对齐：居中；
边缘顶部：10px；
z指数：0；
不透明度：0；
/*动画：持续时间计时功能延迟名称*/
动画：2s轻松5s fadeIn；
-webkit动画：2s ease 5s fadeIn；
-moz动画：2s ease 5s fadeIn；
-o动画：2s轻松5s fadeIn；
-ms动画：2s轻松5s fadeIn；
动画填充模式：正向；
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-moz关键帧fadeIn{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-webkit关键帧fadeIn{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-o-关键帧fadeIn{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-ms关键帧fadeIn{
0%{不透明度：0；}
100%{不透明度：1；}
}

你好

您可以在Javascript中使用dom回调函数等待文档加载，然后将样式添加到元素中


（函数（）{
让target=document.querySelector（“#aboutone”）；
target.style.cssText=“动画延迟：5s；webkit动画：fadeIn ease 2s；-moz动画：fadeIn ease 2s；-o-动画：fadeIn ease 2s；-ms动画：fadeIn ease 2s；”；
});
.abouttext{
文本对齐：居中；
/*颜色：白色；已删除用于代码段演示*/
宽度：80%；
左边距：10%；
保证金权利：10%；
浮动：对；
}
#阿布通{
边缘顶部：10px；
动画：FadeinEase2s；
z指数：0；
不透明度：0；
动画填充模式：正向；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-o-关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-ms关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}

你好

删除前缀规则或将动画延迟设置在它们后面。。。前缀现在对于动画来说是无用的，或者他们甚至可以使用listener
onload
作为
body
。不过，问题是延迟不起作用，而是动画马上开始。编辑得不错。我将包括你对我的回答，因为我的重点是延迟不工作。谢谢：）谢谢！在我开始学习Javascript之前，我现在正试图学习HTML和CSS，所以我采用了另一个答案中的解决方案。不过，非常感谢@RoryShell您也可以在HTML中使用
onload
）。在
body
标记中，添加属性
onload=”“
。在那里，您可以添加上面答案中的代码。尽管如此，它仍将使用JavaScript（DOM）-实际上并不复杂。这已经非常有效，感谢您的清晰解释，帮助我了解它最初为什么不起作用@罗瑞：没问题，很高兴它起作用了！您还可以阅读其他解释如何在全身负荷后使用动画的答案