Css 页面加载时的动画延迟

我一直在尝试为图像加载创建延迟。我发现这段代码几乎可以做到这一点，但我真的希望它能延迟加载10秒，而不仅仅是淡入。我已经搜索并尝试了许多不同的代码，但这是我唯一能够在中途完成我想要的工作的东西。如果有人知道我将如何修改它，以便在加载之前获得延迟，我将非常感激

#topHeader .image {
 margin-top: 25px;
font-size: 21px;
text-align: center;

-webkit-animation: fadeinLoad 10s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadeinLoad 10s; /* Firefox < 16 */
    -ms-animation: fadeinLoad 10s; /* Internet Explorer */
     -o-animation: fadeinLoad 10s; /* Opera < 12.1 */
        animation: fadeinLoad 10s;
}

@keyframes fadeinLoad {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadeinLoad {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinLoad {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadeinLoad {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadeinLoad {
from { opacity: 0; }
to   { opacity: 1; }
}

#topHeader.image{
边缘顶部：25px；
字号：21px；
文本对齐：居中；
-webkit动画：fadeinLoad 10s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadeinLoad 10s；/*Firefox<16*/
-ms动画：fadeinLoad 10s；/*Internet Explorer*/
-o-动画：fadeinLoad 10s；/*Opera<12.1*/
动画：fadeinLoad 10s；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
/*Firefox<16*/
@-moz关键帧fadeinLoad{
从{opacity:0；}
到{opacity:1；}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadeinLoad{
从{opacity:0；}
到{opacity:1；}
}
/*Internet Explorer*/
@-ms关键帧fadeinLoad{
从{opacity:0；}
到{opacity:1；}
}
/*歌剧<12.1*/
@-o-关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}

这比关键帧动画简单得多

将代码更改为以下内容：

#topHeader .image {
  transition-delay: 10s;
  transition: opacity 1s; 
  opacity: 0;
}
#topHeader .image.YOUR-FIRING-CLASSNAME-HERE {
  opacity: 1;
}

此外，需要为每个CSS3属性添加前缀的日子已经过去了。你不需要

-o-

，

-ms-

等等

---

保存关键帧，因为这些关键帧显然还没有大规模的标准化支持。

我们需要提供

.image

类

不透明度：0

以便加载隐藏。然后，延迟动画：

animation: fadeinLoad 1s 5s forwards;

第二次

5s

指定等待激活时间为5秒。

forwards

属性将动画暂停为100%

上面的速记与此相同：

animation-name: fadeinLoad; 
animation-duration: 1s; 
animation-delay: 5s; 
animation-fill-mode: forwards;

只需要一个前缀：用于动画和关键帧（Chrome、Safari、Opera）

例子 数到五：）

#topHeader.image{
边缘顶部：25px；
字号：21px；
文本对齐：居中；
-webkit动画：fadeinLoad 1s 5s向前；
动画：fadeinLoad 1s 5s向前；
背景：#F00；
不透明度：0；
}
@-webkit关键帧fadeinLoad{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

数到5！

该编辑看起来应该是注释。你应该在Josh的回答下看到添加评论链接。谢谢你的帮助。这正是我想要的。