Question

我一直在尝试为图片加载创建延迟。我发现这个代码几乎可以解决这个问题，但是我真的希望它延迟加载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; }
}

Answer 1

我们需要提供.image类opacity: 0，以便加载隐藏。然后，延迟动画：

animation: fadeinLoad 1s 5s forwards;

5s的第二次指定等待激活时间为5秒。 forwards属性将动画暂停为100％。

上面的简写与此相同：

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

Read more on CSS animation over on the MDN

动画和关键帧（Chrome，Safari，Opera）只需要一个前缀： Only the -webkit- prefix is required

实施例

数到五：）

#topHeader .image {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  -webkit-animation: fadeinLoad 1s 5s forwards;
  animation: fadeinLoad 1s 5s forwards;
  background: #F00;
  opacity: 0;
}
@-webkit-keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Count to 5!
<div id="topHeader">
  <img class="image" src="http://www.placehold.it/200" />
</div>

Answer 2

你可以比关键帧动画更简单。

将您的代码更改为以下内容：

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

另外，需要为每个CSS3属性添加前缀的日子已经过去了。您不需要-o-，-ms-等等。

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

页面加载时的动画延迟

2 个答案:

实施例