title: How to move a div up and down infinitely in CSS3?
body: <p>Hello I am trying to do the simple task of moving a div up and down to give a floating/hovering effect using bottom instead of top. So from <code>bottom: 63px</code> to <code>bottom: 400px</code>.</p>
  
  <p>I am new to CSS and keyframes! As you can probably tell But here is what I have tried and it didn't seem to do anything: </p>
  
  <pre><code>.piece-open-space #emma {
      background-image: url('images/perso/Emma.png?1418918581');
      width: 244px;
      height: 299px;
      position: absolute;
      display: block;
      width: 244px;
      background-image: none;
      position: absolute;
      left: 2149px;
      bottom: 63px;
      -webkit-animation: MoveUpDown 50s linear infinite;
  }
  
  @-webkit-keyframes MoveUpDown {
      from {
          bottom: 63px;
      }
      to { 
          bottom: 400px;
      }
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>The problem is it won't loop with is the goal I am looking for it gets to 400px then instantly goes back to 63px how would i make it get to 400px and then go back down to 63px it give the effect of an endless loop of "hovering/floating".</p>