使用CSS3制作图像/ div淡入淡出,而不使用悬停

Question

我有一个带有图像的div.目前我使用CSS3动画将其淡化,但性能非常糟糕.

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

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

目前,正如我在动画中所说,我有:

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

50% {
 opacity: 0;
}

to {
 opacity: 1;
    }
}

有任何想法吗？谢谢.

Answer 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;
}