html - 延迟此 CSS 淡入

Question

使用此链接，http://jsfiddle.net/UtnHS/我想让图像在 5 秒后快速淡入。到目前为止，更改不透明度属性只会在淡入时改变外观。我只是想一起延迟淡入并让它在 5 秒后完全加载。示例:尝试将 2s 更改为 20s 并且加载缓慢。我希望它能够快速加载(5 秒后)。我基本上希望有 5 秒钟的空白，然后我希望图片完全加载。

img {
  opacity: 0;
  -moz-transition: opacity 2s;
  /* Firefox 4 */
  -webkit-transition: opacity 2s;
  /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}

<img onload="this.style.opacity='1';" src="http://digital-photography-school.com/wp-content/uploads/2007/02/images/bird-photography.jpg" />

Answer 1

使用过渡延迟选项，将此 transition: opacity 2s; 更改为:

transition: opacity 2s 5s;

其中2s表示转场持续时间，最后的5s表示播放转场前的延迟时间。

您也可以使用“手写”方式将其写在自己的一行中，如下所示:

transition-delay: 5s; 

JS Fiddle

img {
  opacity: 0;
  -moz-transition: opacity 2s 5s;  /* Firefox 4 */
  -webkit-transition: opacity 2s 5s; /* Safari and Chrome */
  -o-transition: opacity 2s 5s;
  transition: opacity 2s 5s;
}

<img onload="this.style.opacity='1';" src="http://digital-photography-school.com/wp-content/uploads/2007/02/images/bird-photography.jpg" />

资源:

• MDN: transition-delay
• CSS-Tricks: transition-delay-delays