Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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" />

资源：

延迟此CSS淡出

1 个答案: