How to move a div up and down infinitely in CSS3?

user_3112634 0
Viewed 122848

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 bottom: 63px to bottom: 400px.

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: 

.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 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".

css-animations css
5 Answers

Up/Down with animation:

div {
    -webkit-animation: action 1s infinite  alternate;
    animation: action 1s infinite  alternate;
}

@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
<div>&#8595;</div>

user_24040700

Up and Down:

div {
        -webkit-animation: upNdown 2s infinite linear;
        animation: upNdown 2s infinite linear;
    }
@-webkit-keyframes upNdown {
         0% { }
         50% { transform: translate(-5px); }
         100% { }
    }
@keyframes upNdown {
         0% { }
         50% { transform: translate(-5px); }
         100% { }
    }
user_65916880

just use animation: up-down 1s infinite alternate;

@keyframes up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(8px);
  }
}
user_116033850
Related