Making an image / div fade with CSS3, without using a hover

I have a div with an image in it. At the moment I use CSS3 animation to fade it off, but the performan开发者_高级运维ce is terrible.

I am pretty sure I should be using transitions. Problem is I cannot find one example that isn't triggered by a hover.

How can I make it so that when the page is loaded, after a delay of 2 seconds, the image/div fades in from 0%?

At the moment, as I said with animation, I have:

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

50% {
 opacity: 0;
}

to {
 opacity: 1;
    }
}

Any ideas? Thank you.

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

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

Using jQuery is probably a better way to go:

<script type="text/javascript">

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

});

</script>

Where #mainContent is the div you want to fade in