css animation and keyframes

Question

I'm trying to make a cube appear at the top of the page with css animation and keyframes. but he appears at the beginning and only after does the animation. how do i make it appear just from above?

I wanted that loads up the page and past two seconds the cube appeared.

<div id="cube"></div>


cube{
    position: relative;
    left:60px;
    width:100px;
    height:200px;
    background:red;     
    -webkit-animation-name: cube;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 0.8s;  
}
@-webkit-keyframes cube {
    0% {top: -200px;}
    100% {top: 0;}
}

here is my example

http://jsfiddle.net/hmmatos/epZJB/

Answer 1

Sorry if I've misunderstood your question, but I'm not really sure how you mean so I've done two different examples hoping that at least one of them will help you.

Demo One

What I've done here is I've added -webkit-animation-fill-mode: forwards; which will maintaine the last state of the animation, making the div stay visible at the position you have set.

Demo Two

In this demo, I'm animating the opacity instead of the positions.

So insted of sliding the div from top: -80; to top: 0; the div fill just fade into place. Also this example uses the -webkit-animation-fill-mode: forwards;.

Here's a good resource if you want to read about CSS animations. http://www.w3.org/TR/css3-animations/

Hope this helps!