How to stagger Fade Ins using CSS animation?

Question

Ultimately what I am trying to achieve is the following:

1. On page load (more specifically, on background image load) I would like the background image to fade in.
2. Followed by the logo.
3. Followed by the nav.
4. Followed by the thumbnails, one right after the other.
5. The thumbnails have to remain at an opacity:1; so that they will reduce to opacity:0.5; on Hover as do the buttons in the side nav.
6. I wouldn't mind having some sort of graphic during page load. How would one do that? Animated gif? How does one place it in order for it to go away upon page load?

See here: http://benner-design.com/test/brentwood1.html

I am new to css animation and would love to learn how to do this for my current project. Many thanks in advance for any help you maybe able to offer. Here is my css:

@charset "UTF-8";
/* CSS Document */

.fade_item{
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;

    /*for hover transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.fade_item_bkg{
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

.fade_item:hover{
    opacity:0.5;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​