Float Up Animation

float-up.css

@-webkit-keyframes float-up {
  0%   { opacity: 0; top: 4rem; }
  100% { opacity: 1; top: 0; }
}

.float-up {
  opacity: 0;
  position: relative;
  -webkit-animation-name: float-up;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: forwards;
}

.float-up:nth-child(1) { -webkit-animation-delay: .1s; }
.float-up:nth-child(2) { -webkit-animation-delay: .2s; }
.float-up:nth-child(3) { -webkit-animation-delay: .3s; }
.float-up:nth-child(4) { -webkit-animation-delay: .4s; }
.float-up:nth-child(5) { -webkit-animation-delay: .5s; }
.float-up:nth-child(6) { -webkit-animation-delay: .6s; }
.float-up:nth-child(7) { -webkit-animation-delay: .7s; }
.float-up:nth-child(8) { -webkit-animation-delay: .8s; }
.float-up:nth-child(9) { -webkit-animation-delay: .9s; }