Fade out then Fade in Element using CSS3 Transition

Question

My Question

Is it possible to temporarily hide an element and then show it again after X milliseconds using CSS3?

A Brief Explanation...

I am currently building a responsive site, on which the sidebar changes size dependant on the size of the screen, as do the navigation icons on the sidebar.

Before the sidebar resizes it's width, I would like to fade out my navigation icons, and then fade them back in once the sidebar has finished animating.

See this example:

I have the following steps:

1. Screen gets resized
2. The navigation icons fade out
3. Once the navigation icons are invisible, the sidebar resizes
4. Once the sidebar has resized, the navigation icons fade back in but this time have different styles applied so they are smaller... (Not sure how to do this part...)

The way I animate the size of the sidebar is as follows:

@media all and (max-width: 1060px) {

    /* Define the Sidebar */
    #sidebar {width:60px !important;}

    /* Define the Sidebar Animation */
    /* The delay ensures it does not resize until the icons have disappeared */
    #sidebar {transition: width 300ms ease 300ms;}

}

Answer 1

Following the idea from @Mr.Alien, I was able to achieve what you wanted as a final animation for your sidebar and navigation. You can check the JS FIDDLE DEMO to see it in action. Obviously, I have not played with values much, so there's always area for improvement. But I think, you will get the idea, @Ben. Please check on chrome or Safari as I haven't put any other vendor prefixes than -webkit. You can resize the fiddle window to check it. :)

#sidebar {
    width: 250px;
    -webkit-transition: width 1s ease;
}

#nav img {
    width: 100px;
}

@media all and (max-width: 700px) {
    #sidebar {
        width:100px;
    } 
    #nav img {
         width: 50px;
        -webkit-animation-name: comeBackSmaller;
        -webkit-animation-duration: 0.8s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }  
    @-webkit-keyframes comeBackSmaller {  
        0% { opacity: 1.0; width: 100px; }
        25% { opacity: 0.0; width: 75px; }
        50% { opacity: 0.0; width: 25px; }
        100% { opacity: 1.0; width: 50px; }
    }
}