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

Question

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

Richel

@diogo What do you mean "because of conflict"? What conflict are you solving with that edit? – Dunsany

Answer 1

You can adjust the timing of the @keyframes as follows:

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

EDIT

As pointed out in a comment below using transform is preferred for high performance animations.

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

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

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

Allnight

Don't use margin or top, bottom, etc cause it consumes cpu power very much as compared to using transform: translate... and ur animation can be slow on some low-end computers. – Lila

Answer 2

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>

Spangle

How to do the same, but also have the arrow move both along X and Y axis? – Esmeraldaesmerelda

Answer 3

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% { }
    }

Aleen

Answer 4

You'll probably want to add animation-direction: alternate; (or -webkit-animation-direction: alternate) to your style rules on .piece-open-space #emma.

That should give you that floating-up-and-down-effect.

I.e. your css should look like:

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

Doorway

Answer 5

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

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

Lila

Answer 6

It is easy to move a div up and down using CSS. Here is a short code snippet that helps you to move the selected div up and down.

Also, I would recommend creating two files - one index.html and another style.css and separate the code into two files and use it that way.

/* Styling for the moving div */
.moving-div {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    animation: moveUpDown 3s ease-in-out infinite alternate;
}

/* Keyframes animation for up-down movement */
@keyframes moveUpDown {
    0% {
        top: 100px;
    }
    100% {
        top: 200px;
    }
}

<div class="moving-div"></div>

Otten

Based on the URL of your link containing your user name/profile site, you appear to have linked to your own site/a site you're affiliated with. If you do, you must disclose that it's your site in your post. If you don't disclose affiliation, it's considered spam. See: What signifies "Good" self promotion?, some tips and advice about self-promotion, What is the exact definition of "spam" for Stack Overflow?, and What makes something spam. – Cherokee

Code-only answers are discouraged. Please click on edit and add some words summarising how your code addresses the question, or perhaps explain how your answer differs from the previous answer/answers. Thanks – Cherokee