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

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>

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

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>

Tags:

Html

Css

Css Animations

Recent Posts