<div class="wrapper">
  <button class="animation type-1">SIGN-UP</button>
  <p>Animation Direction: <b>normal</b></p>
  <button class="animation type-2">SIGN-UP</button>
  <p>Animation Direction: <b>reverse</b></p>
  <button class="animation type-3">SIGN-UP</button>
  <p>Animation Direction: <b>alternate</b></p>
  <button class="animation type-4">SIGN-UP</button>
  <p>Animation Direction: <b>alternate-reverse</b></p>
</div>

html, body {
  background: #4EA1FF;
  width: 90%;
  height: 90%;
  margin: 5%;
}

p {
  color: #FFF;
  text-align: center;
  margin-bottom: 50px;
}
button {
  display: block;
  margin: 0 auto;
  background: #FFF;
  position: relative;
  padding: 15px 40px;
  border: none;
  color: #f49a25;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}

@keyframes translate {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(10px);
    opacity: 1;
  }
}

.animation {
  animation-duration: 3s; 
  animation-iteration-count: infinite; 
  animation-name: translate;
}

.type-1 {
  animation-direction: normal; 
}
.type-2 {
  animation-direction: reverse; 
}
.type-3 {
  animation-direction: alternate;
}
.type-4 {
  animation-direction: alternate-reverse;
}