How to move div up and down endlessly in CSS3?

Question

Hello, I'm trying to accomplish the simple task of moving a div up and down to create a float / hover effect using the bottom rather than the top. So, from bottom: 63pxto bottom: 400px.

I'm new to CSS and keyframes! As you can probably tell. But here is what I tried, and he did nothing:

.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;
    }
}

Update

The problem is that it won’t go in cycles with the goal I’m looking for, it gets to 400px and then goes back to 63px, how would I do this to get 400px and then go back to 63px, this gives the effect of an endless freeze cycle / swimming. "

Answer 1

:

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

<div class="object">
  hello world!
</div>

Hide result

Answer 2

, animation-direction: alternate; ( -webkit-animation-direction: alternate) .piece-open-space #emma.

" " "".

.. css :

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    display: block;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
    -webkit-animation-direction: alternate;
}