Создание изображения / div исчезает с помощью CSS3, без использования наведения

Question

У меня есть div с изображением. В настоящее время я использую анимацию CSS3, чтобы затушить ее, но производительность ужасна.

Я почти уверен, что должен использовать переходы. Проблема в том, что я не могу найти один пример, который не запускается при наведении.

Как сделать так, чтобы при загрузке страницы после задержки в 2 секунды изображение / деление исчезало с 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, который вы хотите добавить в