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

- Aaron Navies

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

- Mi-Creativity

---

太好了，它完全奏效了。谢谢 @Mi-Creativity。堆栈说在选择你的答案之前我必须等待9分钟！更新来了。谢谢。 - Aaron Navies