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

Question

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>

Leave a Comment Cancel reply