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

Answer 2

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

<script type="text/javascript">

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

});

</script>

其中#mainContent是您要淡入的div

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

2 个答案: