title: css animation and keyframes
body: <p>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?</p>
  
  <p>I wanted that loads up the page and past two seconds the cube appeared. </p>
  
  <pre><code>&lt;div id="cube"&gt;&lt;/div&gt;
  
  
  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;}
  }
  </code></pre>
  
  <p>here is my example</p>
  
  <p><a href="http://jsfiddle.net/hmmatos/epZJB/" rel="nofollow">http://jsfiddle.net/hmmatos/epZJB/</a></p>