使用 CSS3 使图像/div 淡化，而不使用悬停答案

【问题标题】：Making an image / div fade with CSS3, without using a hover使用 CSS3 使图像/div 淡化，而不使用悬停
【发布时间】：2011-03-18 18:48:45
【问题描述】：

我有一个 div，里面有一张图片。目前我使用 CSS3 动画将其淡出，但性能很糟糕。

我很确定我应该使用过渡。问题是我找不到一个不是由悬停触发的示例。

我怎样才能使页面加载时，延迟 2 秒后，图像/div 从 0% 淡入？

目前，正如我对动画所说，我有：

@-webkit-keyframes fadetime {
from {
 opacity: 0;
}

50% {
 opacity: 0;
}

to {
 opacity: 1;
    }
}

有什么想法吗？谢谢。

【问题讨论】：

你可以在类中使用过渡，然后在 2 秒后用 css 添加类。

标签： animation css opacity transition

【解决方案1】：

@-webkit-keyframes FadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.object {
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 3s;
}

【讨论】：

嗨，这很容易适应创建一个图片库，你会如何淡出第一层显示第二层，然后第二层显示第三层等等。谢谢加里跨度>

【解决方案2】：

使用 jQuery 可能是更好的选择：

<script type="text/javascript">

$(document).ready(function () {
$('#mainContent').hide();
$('#mainContent').delay(2000).fadeIn(500);

});

</script>

#mainContent 是你想要淡入的 div

【讨论】：

Jquery 比 CSS3 动画慢很多。
jQuery 是一个很好的后备方案（使用 Modernizr 来检测 CSS 动画支持），但是 CSS3 动画要快得多，并且可能在不久的将来会采用