$bezier-function: cubic-bezier(.1, .7, .1, 1);
 
.slide-in-up {
  // Start hidden
  opacity: 0;
  // Start it down low
 -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);

  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
  transition: -webkit-transform 0.25s, opacity 0.25s;

  -webkit-transition-timing-function: $bezier-function;
  transition-timing-function: $bezier-function;
  
  -webkit-animation-fill-mode: forwards;
}

.slide-in-up.active {
    opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@keyframes fadein {
    from { opacity:0; }
    to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

.fade-in {
  opacity: 0;
  animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
}