.orb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FF5722;

  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 0.5vw, 0); }
}

/* Prefix Support */
.orb {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(0, 0.5vw, 0); transform: translate3d(0, 0.5vw, 0); }
}