css animation/transition: fade-out or slide-up element after certain time?

Question

on my current page is this …

<div id="wr-notice" class="success">
    <div class="wrapper inner message">Thank you!</div>
</div>

the css …

#wr-notice {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    color:white;
    background:green;
}

Is it possible with CSS3 to "hide" this #wr-notice ater 5 seconds? So when the page is loaded the #wr-notice should be visible and after 5 seconds i'd like to hide or animate it. The best scenario would be to animate its height to 0 so it kind of slides-up?

Is that "timer" even possible with CSS3 transitions?

Any ideas on that matter?

Answer 1

Here is a fiddle with a pure css sollution.

I've tried it in Firefox, but in Chrome there is an issue when moving something out of the viewport. The background won't be redrawn, so the green background will appear to be stationary while the text move. But the element is actually moving, so I guess you just have to live with that unless someone can come up with a hack. It works if you move the object within the viewport. Maybe someone should report the bug, but whatever.

EDIT: I know it looks kind of strange with the red background and the cursor pointer thing, but I just wanted to showcase the Chrome bug. None of that is essential to the css.

EDIT 2: If you want to know more just google "css keyframe animation" or something.