How to animate the div from bottom to top without stop?

Question

I would like to have this div animated anytime with no stop, How can I animate it from bottom to top without stopping?

div {
  width: 10px;
  height: 100px;
  background: red;
  position: relative;
  animation: animateDiv 5s 2;
  animation-direction: alternate;
}

@keyframes animateDiv {
  0%   {bottom: 0px; top: 10px;}
  25%  {bottom: 200px; top:30px;}
}

Answer 1

You can use animation infinite in css

div {
  width: 10px;
  height: 100px;
  background: red;
  position: relative;
  animation: animateDiv 5s 2;
  animation-direction: alternate;
  animation-iteration-count: infinite; //You must add this to make it infinite
}

and also you can make this keyframe to 100% to see a smooth animation :D

@keyframes animateDiv {
  0%   {bottom: 0px; top: 50px;}
  100%  {bottom: 50px; top:0px;
}

Answer 2

You can use infinite for your animation. An example is below:

.container {
  position: relative;
  background-color: #eee;
  height: 100px;
  width: 500px;
}

#box {
  position: absolute;
  top: 0;
  left: calc(50% - 5px);
  animation: move 2s infinite;
  background-color: red;
  height: 10px;
  transform: translateY(0);
  width: 10px;
}

@keyframes move {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(90px)}
}

<div class="container">
  <div id="box"></div>
</div>

Answer 3

Use "infinite" instead of "2". This will make the animation repeat forever!