$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.4s, opacity 0.1s;
  transition: -webkit-transform 0.4s, opacity 0.1s;

  -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);
}

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  -webkit-animation: fadeOut 0.3s;
  animation: fadeOut 0.3s;
  &.active {
    -webkit-animation: fadeIn 0.3s;
    animation: fadeIn 0.3s;
  }
}

@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
  } 
}