Animation 使用CSS3使图像/div淡入淡出，而不使用悬停

我有一个有图像的div。目前，我使用CSS3动画将其淡出，但性能非常糟糕

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

如何使页面加载时，在延迟2秒后，图像/div从0%淡入

目前，正如我在动画方面所说，我有：

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

50% {
 opacity: 0;
}

to {
 opacity: 1;
    }
}

---

有什么想法吗？谢谢。

使用jQuery可能是更好的方法：

<script type="text/javascript">

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

});

</script>

$（文档）.ready（函数（）{
$（'#mainContent'）.hide（）；
$（#mainContent'）。delay（2000）。fadeIn（500）；
});

---

其中#main content是您想要淡入的div

Jquery比CSS3动画要慢得多。Jquery是一个很好的后备方案（使用Modernizer检测CSS动画支持），但是CSS3动画要快得多，而且可能是在不久的将来的发展方向。Hi，是否很容易将其应用于创建图像库，你会如何逐渐淡出第一层以显示第二层，然后第二层以显示第三层等等。谢谢GaryYou可以在类中使用转换，然后在2秒钟后添加带有css的类。

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

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